jQuery-Implementierung zur automatischen Aktualisierung von Tabellenzeilennummern-js-Tutorial-php.cn

jQuery-Implementierung zur automatischen Aktualisierung von Tabellenzeilennummern

PHPz

Freigeben： 2024-02-26 16:06:33

Original

706 Leute haben es durchsucht

jQuery-Implementierung zur automatischen Aktualisierung von Tabellenzeilennummern

jQuery ist eine beliebte JavaScript-Bibliothek, die häufig in der Webentwicklung verwendet wird. In der Webentwicklung stoßen wir häufig auf Situationen, in denen Daten angezeigt werden müssen und Tabellen eine gängige Art der Datendarstellung sind. In einer dynamischen Tabelle gibt es häufig Vorgänge wie Löschen, Hinzufügen, Sortieren usw. Zu diesem Zeitpunkt ist es erforderlich, die Seriennummern in der Tabelle automatisch zu aktualisieren, wenn sich die Anzahl der Zeilen in der Tabelle ändert. Im Folgenden wird detailliert beschrieben, wie Sie diese Funktion mit jQuery erreichen.

Das Codebeispiel lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery-Implementierung zur automatischen Aktualisierung von Tabellenzeilennummern</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
    }
</style>
</head>
<body>
<h1>表格示例</h1>
<table id="data-table">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Alice</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bob</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Charlie</td>
            <td>28</td>
        </tr>
    </tbody>
</table>

<button id="add-row">新增行</button>
<button id="delete-row">删除行</button>

<script>
    // 初始表格序号
    function updateRowNumber() {
        $('#data-table tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    // 新增行
    $('#add-row').on('click', function() {
        $('#data-table tbody').append('<tr><td></td><td>New</td><td>0</td></tr>');
        updateRowNumber();
    });

    // 删除行
    $('#delete-row').on('click', function() {
        $('#data-table tbody tr:last').remove();
        updateRowNumber();
    });
</script>
</body>
</html>

Nach dem Login kopieren

Im obigen Code wird zunächst eine Tabelle mit Namen und Alter erstellt und eine Kopfzeile mit Seriennummer, Name und Alter hinzugefügt. Dann habe ich mit jQuery zwei Ereignis-Listener geschrieben, jeweils zum Hinzufügen von Zeilen und zum Löschen von Zeilen. Unter anderem wird die Seriennummer über die Funktion updateRowNumber函数实现了当表格行数变化时，自动更新表格中的序号。新增行和删除行的操作都会调用updateRowNumber automatisch aktualisiert, wenn sich die Anzahl der Tabellenzeilen ändert.

Durch solche Codebeispiele können Sie die automatische Aktualisierungsfunktion der Seriennummer einfach implementieren, wenn sich die Anzahl der Tabellenzeilen ändert, sodass die Tabelle einen guten Anzeigeeffekt beibehalten kann, wenn sich die Daten dynamisch ändern.

Das obige ist der detaillierte Inhalt vonjQuery-Implementierung zur automatischen Aktualisierung von Tabellenzeilennummern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!