jquery如何动态写入td内容
1、第一步：编辑HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
.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>
<table id="table1">
<thead><tr>
<th style="width: 160px;">表头一</th>
<th style="width: 160px;">表头二 </th>
<th style="width: 160px;">表头三</th>
<th style="width: 160px;">表头四</th>
<th style="width: 160px;">表头五</th>
</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>
<script>
$(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("第一行第一列内容修改")修改第一行第一列表格的内容。
