如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
jquery如何动态写入td内容
来源：互联网
2023-03-16 19:13:13 124
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery动态写入td内容主要是先理解jquery的选择过滤器，得到对应的td对象，然后在对其操作。
工具/原料
- 电脑
- HTML编辑器，jquery，谷歌浏览器
方法/步骤
第一步：编辑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>
第二步：使用谷歌浏览器打开编辑的页面，页面展示效果如下所示。
第三步：测试页面，首先在谷歌浏览器中按F12打开调试页面--选择控制台（console）具体页面如下所示：首先我们选择并修改第一行，第一列的td中的内容
第四步：关键代码解析：
$('#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的基础上实现的所以需要引入jquery
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：chrome浏览器如何断点调试 下一篇：HTML标签是什么
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 435 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)