jquery如何動態寫入td內容

2019-12-12 04:27:00

jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。jQuery設計的宗旨是「write Less，Do More」，即倡導寫更少的程式碼，做更多的事情。它封裝JavaScript常用的功能程式碼，提供一種簡便的JavaScript設計模式，優化HTML文件操作、事件處理、動畫設計和Ajax互動。

jquery動態寫入td內容主要是先理解jquery的選擇過濾器，得到對應的td物件，然後在對其操作。

1

第一步：編輯HTML程式碼

<!DOCTYPE html>

<html>

<head>

.hover{

background-color: #cccc00;

}

table{

border-collapse: collapse;

border-spacing: 0;

margin-right: auto;

margin-left: auto;

width: 800px;

}

th, td{

border: 1px solid #b5d6e6;

font-size: 12px;

font-weight: normal;

text-align: center;

vertical-align: middle;

height: 20px;

}th

{

background-color: Gray;

}

</style>

</head>

<body>

</tr></thead>

<tbody>

<tr>

<td>第一行第一列</td>

<td>第一行第二列</td>

<td>第一行第三列</td>

<td>第一行第四列</td>

<td>第一行第五列</td>

</tr>

<tr>

<td>第二行第一列</td>

<td>第二行第二列</td>

<td>第二行第三列</td>

<td>第二行第四列</td>

<td>第二行第五列</td>

</tr>

<tr>

<td>第三行第一列</td>

<td>第三行第二列</td>

<td>第三行第三列</td>

<td>第三行第四列</td>

<td>第三行第五列</td>

</tr>

<tr>

<td>第四行第一列</td>

<td>第四行第二列</td>

<td>第四行第三列</td>

<td>第四行第四列</td>

<td>第四行第五列</td>

</tr>

</tbody>

</table>

$(document).ready(function () {

//滑鼠移動到行變色,單獨建立css類hover

//tr:gt(0):表示獲取大於 tr index 為0 的所有tr，即不包括表頭

$("#table1 tr:gt(0)").hover(

function () { $(this).addClass("hover") },

function () { $(this).removeClass("hover") })

});

</script>

</body>

</html>

2

第二步：使用谷歌瀏覽器開啟編輯的頁面，頁面展示效果如下所示。

3

第三步：測試頁面，首先在谷歌瀏覽器中按F12開啟偵錯頁面--選擇控制台（console）具體頁面如下所示：首先我們選擇並修改第一行，第一列的td中的內容

4

第四步：關鍵程式碼解析：

$('#table1') 選擇表格

$('#table1').find('tbody') 選擇表格下的tbody

$('#table1').find('tbody').find('tr:eq(1)') 選擇表格下tbody下第二行tr（下標從0開始）

$('#table1').find('tbody').find('tr:eq(1)').find('td:lt(1)')選擇第一行第一列的表格

$('#table1').find('tbody').find('tr:eq(1)').find('td:lt(1)').html("第一行第一列內容修改")修改第一行第一列表格的內容。

jquery如何動態寫入td內容

1

2

3

4

熱門文章