3. 刪除行

同樣地，我們也可以刪除表格中的行。假設(shè)我們要?jiǎng)h除第一行，可以這樣做：

table.find('tr').first().remove();

4. 編輯單元格內(nèi)容

如果需要修改某個(gè)單元格的內(nèi)容，可以使用以下代碼：

table.find('tr').eq(1).find('td').eq(0).text('趙六');

5. 搜索和高亮顯示

我們可以使用jQuery來搜索表格中的數(shù)據(jù)，并高亮顯示匹配的行：

$('#searchInput').on('input', function() {
    var searchValue = $(this).val().toLowerCase();
    table.find('tr').each(function() {
        var $row = $(this);
        var $cols = $row.find('td');
        var isMatch = $cols.filter(function() {
            return $(this).text().toLowerCase().indexOf(searchValue) === -1;
        });
        $row.toggle(!isMatch.length);
    });
});

6. 排序

使用jQuery，我們可以實(shí)現(xiàn)簡(jiǎn)單的排序功能。以下是一個(gè)按年齡排序的示例：

table.find('th').click(function() {
    var columnIndex = $(this).index();
    var rows = table.find('tbody tr').get();
    rows.sort(function(a, b) {
        var A = $(a).find('td').eq(columnIndex).text();
        var B = $(b).find('td').eq(columnIndex).text();
        return A - B;
    });
    $.each(rows, function(index, row) {
        table.find('tbody').append(row);
    });
});

結(jié)語(yǔ)

通過上述示例，我們可以看到j(luò)Query在操作HTML表格方面的便捷性。無論是添加、刪除、編輯行，還是實(shí)現(xiàn)搜索和排序功能，jQuery都提供了簡(jiǎn)單易用的API。掌握這些基本操作，可以幫助我們更高效地開發(fā)動(dòng)態(tài)的網(wǎng)頁(yè)應(yīng)用。

注意事項(xiàng)

• 確保在操作表格之前，頁(yè)面已經(jīng)加載完成，通常將jQuery代碼放在$(document).ready(function() {...});中。
• 考慮到性能和可維護(hù)性，盡量避免在循環(huán)中使用復(fù)雜的選擇器或操作。
• 使用jQuery的.text()方法來設(shè)置或獲取文本內(nèi)容，而不是.html()，以避免XSS攻擊。

通過這些基本的指導(dǎo)和示例，你應(yīng)該能夠開始使用jQuery來編寫和優(yōu)化你的表格代碼了。