在網(wǎng)頁(yè)開(kāi)發(fā)中，使用表格展示數(shù)據(jù)是非常常見(jiàn)的一種形式。而對(duì)于人力資源管理系統(tǒng)或者工資管理系統(tǒng)等應(yīng)用中，我們經(jīng)常需要在表格中對(duì)員工進(jìn)行添加和刪除，下面我們就使用jquery實(shí)現(xiàn)該功能。

首先，我們創(chuàng)建一個(gè)用于展示員工信息的表格，如下所示：

<table id="employeeTable">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>工作崗位</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

我們需要在表格的tbody標(biāo)簽中動(dòng)態(tài)添加員工信息，通過(guò)jquery實(shí)現(xiàn)如下：

$(function() {
// 添加員工信息
$("#addEmployeeBtn").click(function() {
var name = $("#nameInput").val();
var age = $("#ageInput").val();
var sex = $("#sexSelect").val();
var job = $("#jobInput").val();
var tr = "<tr><td>" + name + "</td><td>" + age + "</td><td>" + sex + "</td><td>" + job + "</td><td><button class='deleteBtn'>刪除</button></td></tr>";
$("#employeeTable tbody").append(tr);
});
});

我們首先獲取Input輸入框中的員工信息，然后拼接成一行表格tr標(biāo)簽，最后添加到表格的tbody標(biāo)簽中。這樣就實(shí)現(xiàn)了員工信息的動(dòng)態(tài)添加。

接下來(lái)，我們需要實(shí)現(xiàn)員工信息的刪除功能。我們給每行表格末尾添加了一個(gè)刪除按鈕，通過(guò)jquery實(shí)現(xiàn)如下：

$(function() {
// 刪除員工信息
$("#employeeTable tbody").on("click", ".deleteBtn", function() {
$(this).parent().parent().remove();
});
});

我們利用jquery的事件委托機(jī)制，當(dāng)點(diǎn)擊每行表格中的刪除按鈕時(shí)，就刪除它所在的整行表格即可。

綜上，我們使用jquery實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的表格員工添加與刪除功能，代碼簡(jiǎn)單易懂，可實(shí)現(xiàn)快速開(kāi)發(fā)。