怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 342 JQUERY DREAMWEAVER
jquery如何动态写入td内容
来源：互联网
2023-03-17 00:47:10 版权归原作者所有，如有侵权，请联系我们
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
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：jquery实现基础的带关闭的选项卡 下一篇：layer弹出层怎么使用
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 330 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 374 JQUERY