日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告：魔扣目錄網(wǎng)為廣大站長(zhǎng)提供免費(fèi)收錄網(wǎng)站服務(wù)，提交前請(qǐng)做好本站友鏈：【網(wǎng)站目錄：http://www.ylptlb.cn 】，免友鏈快審服務(wù)（50元/站），

網(wǎng)站：51998
待審：31
小程序：12
文章：1030137
會(huì)員：747

首頁(yè) > 新聞資訊 > IT業(yè)界 >正文

使用jQuery實(shí)現(xiàn)動(dòng)態(tài)表格行數(shù)自動(dòng)編號(hào)

發(fā)布時(shí)間：2024-03-08 21:58:44 作者：網(wǎng)友整理

利用jQuery實(shí)現(xiàn)表格序號(hào)隨著行數(shù)增加而自動(dòng)變化

在網(wǎng)頁(yè)開(kāi)發(fā)中，常常需要展示數(shù)據(jù)表格，并且希望在表格每一行的第一列顯示序號(hào)，以方便用戶快速定位。在這篇文章中，我們將利用jQuery庫(kù)來(lái)實(shí)現(xiàn)表格序號(hào)隨著行數(shù)增加而自動(dòng)變化的效果。

HTML結(jié)構(gòu)

首先，我們準(zhǔn)備一個(gè)簡(jiǎn)單的HTML表格結(jié)構(gòu)，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格序號(hào)自動(dòng)變化</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table id="data-table">
    <thead>
        <tr>
            <th>序號(hào)</th>
            <th>姓名</th>
            <th>年齡</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>張三</td>
            <td>25</td>
        </tr>
        <tr>
            <td></td>
            <td>李四</td>
            <td>30</td>
        </tr>
        <!-- 更多行 -->
    </tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

登錄后復(fù)制

在表格中，我們留了一個(gè)空的

標(biāo)簽，用于放置序號(hào)。

JavaScript代碼

接下來(lái)，我們創(chuàng)建一個(gè)名為script.js的JavaScript文件，用來(lái)編寫(xiě) jQuery 代碼來(lái)實(shí)現(xiàn)表格序號(hào)自動(dòng)變化的功能。

$(document).ready(function() {
    updateTableIndex();

    // 實(shí)現(xiàn)序號(hào)自動(dòng)更新的函數(shù)
    function updateTableIndex() {
        $('#data-table tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    // 監(jiān)聽(tīng)表格行增加的事件
    $('#data-table').on('DOMNodeInserted', 'tbody tr', function() {
        updateTableIndex();
    });
});

登錄后復(fù)制

以上代碼中，我們首先在頁(yè)面加載完成后調(diào)用updateTableIndex()函數(shù)來(lái)為表格添加初始的序號(hào)。然后使用on()方法來(lái)監(jiān)聽(tīng)表格中行的增加事件，一旦有新的行被添加，便會(huì)觸發(fā)更新序號(hào)的函數(shù)。

CSS樣式

為了讓表格更美觀，我們還可以添加一些簡(jiǎn)單的CSS樣式：

body {
    font-family: Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
}

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

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

登錄后復(fù)制

結(jié)語(yǔ)

通過(guò)以上代碼示例，我們成功地利用 jQuery 實(shí)現(xiàn)了表格序號(hào)隨著行數(shù)增加而自動(dòng)變化的效果。這樣的功能可以為用戶提供更好的數(shù)據(jù)展示體驗(yàn)，同時(shí)也提高了網(wǎng)頁(yè)的交互性。希望這篇文章可以幫助到正在學(xué)習(xí)前端開(kāi)發(fā)的朋友們，也歡迎大家多多交流學(xué)習(xí)，共同進(jìn)步！

分享到：

標(biāo)簽：jQuery 動(dòng)態(tài) 編號(hào) 行數(shù) 表格