一个JQuery操作Table的代码分享
2023-06-13 09:14:33 时间
一、数据准备
<tableid="table1">
<tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>操作</th></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
</table>
<tableid="table2">
<tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
</table>
<tableid="table3">
<thead>
<tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr>
</thead>
<tbody>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
</tbody>
</table>
<tableid="table4">
<thead>
<tr><td>文章标题</td><td>文章分类</td><td>发布时间</td><td>操作</td></tr>
</thead>
<tbody>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试</td><td>测试</td><td>测试</td><td>测试</td></tr>
<tr><td>测试3</td><td>测试</td><td>测试</td><td>测试</td></tr>
</tbody>
</table>
二、操作
<scripttype="text/javascript">
//1.鼠标移动行变色
$("#table1tr").hover(function(){
$(this).children("td").addClass("hover")
},function(){
$(this).children("td").removeClass("hover")
})
$("#table2tr:gt(0)").hover(function(){
$(this).children("td").addClass("hover");
},function(){
$(this).children("td").removeClass("hover");
});
//2.奇偶行不同颜色
$("#table3tbodytr:odd").css("background-color","#bbf");
$("#table3tbodytr:even").css("background-color","#ffc");
$("#table3tbodytr:odd").addClass("odd")
$("#table3tbodytr:even").addClass("even")
//3.隐藏一行
$("#table3tbodytr:eq(3)").hide();
//4.隐藏一列
$("#table5trtd::nth-child(3)").hide();
$("#table5tr").each(function(){$("td:eq(3)",this).hide()});
//5.删除一行
//删除除第一行外的所有行
$("#table6tr:not(:first)").remove();
//6.删除一列
//删除除第一列外的所有列
$("#table6trtd:not(:nth-child(1))").remove();
//7.得到(设置)某个单元格的值
//设置table7,第2个tr的第一个td的值。
$("#table7tr:eq(1)td:nth-child(1)").html("value");
//获取table7,第2个tr的第一个td的值。
$("#table7tr:eq(1)td:nth-child(1)").html();
//8.插入一行:
//在第二个tr后插入一行
$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7tr:eq(1)"));
</script>
相关文章
- JQuery中的select下拉框[通俗易懂]
- 禁用右键的jQuery代码片段详解编程语言
- JQUERY复选框CHECKBOX全选,取消全选
- jquery下操作HTML控件的实现代码
- jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
- jquery下json数组的操作实现代码
- 基于jquery的复制网页内容到WORD的实现代码
- jquery操作selectoption的代码小结
- jquery绑定原理简单解析与实现代码分享
- JQuery循环滚动图片代码
- jQuery提交表单ajax查询实例代码
- jquery延迟加载外部js实现代码
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- JQuery设置和去除disabled属性的5种方法总结
- jquery实现输入框动态增减的实例代码
- jquery获取表单元素里面的值示例代码
- jquery单引号和双引号的区别及使用注意
- Jquery右下角抖动、浮动实例代码(兼容ie6、FF)
- jquery的选择器的使用技巧之如何选择input框
- JQuery以JSON方式提交数据到服务端示例代码
- Jquery操作js数组及对象示例代码
- js、jquery图片动画、动态切换示例代码
- 兼容主流浏览器的jQuery+CSS实现遮罩层的简单代码
- jquery禁止回车触发表单提交
- jQuery打印图片pdf、txt示例代码
- 一款由jquery实现的整屏切换特效