jQuery操作Table技巧大汇总
更新时间:2016年1月25日 10:01 点击:1928
本文汇总了jQuery操作Table的技巧。分享给大家供大家参考,具体如下:
1.鼠标移动行变色
方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二:第二个方法是取消样式功能
$("#table1 tr").hover(function(){ $(this).children("td").addClass("hover") },function(){ $(this).children("td").removeClass("hover") })
方法二:
$("#table1 tr:gt(0)").hover(function() { $(this).children("td").addClass("hover"); }, function() { $(this).children("td").removeClass("hover"); });
2.奇偶行不同颜色
$("#table1 tbody tr:odd").css("background-color", "#bbf"); $("#table1 tbody tr:even").css("background-color","#ffc"); $("#table1 tbody tr:odd").addClass("odd") $("#table1 tbody tr:even").addClass("even")
3.隐藏一行
复制代码 代码如下:
$("#table1 tbody tr:eq(3)").hide();
4.隐藏一列
方法一:
复制代码 代码如下:
$("#table1 tr td::nth-child(3)").hide();
方法二:
复制代码 代码如下:
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});
5.删除一行
//删除除第一行外的所有行 $("#table1 tr:not(:first)").remove(); //删除指定行 $("#table1 tr:eq(3)").remove();
6.删除一列
//删除除第一列外的所有列 $("#table1 tr th:not(:nth-child(1))").remove(); $("#table1 tr td:not(:nth-child(1))").remove(); //删除第一列 $("#table1 tr td::nth-child(1)").remove();
7.得到(设置)某个单元格的值
//设置table1,第2个tr的第一个td的值。 $("#table1 tr:eq(1) td:nth-child(1)").html("value"); //获取table1,第2个tr的第一个td的值。 $("#table1 tr:eq(1) td:nth-child(1)").html();
8.插入一行:
//在第二个tr后插入一行 $("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));
9、获取每一行指定的单元格的值
var arr = []; $("#table1 tr td:nth-child(1)").each(function (key, value) { arr.push($(this).html()); }); var result = arr.join(',');
10、全选或全不选
//方法一: //全选或全不选 此传入的参数为event 如:checkAll(event) function checkAll(evt) { evt=evt?evt:window.event; var chall=evt.target?evt.target:evt.srcElement; var tbl=$("#table1"); var trlist=tbl.find("tr"); for(var i=1;i<trlist.length;i++) { var tr=$(trlist[i]); var input=tr.find("INPUT[type='checkbox']"); input.attr("checked",chall.checked); } } //方法二: //全选或全不选 此传入的参数为this 如:checkAll(this) function checkAll(evt) { var tbl=$("#table1"); var trlist=tbl.find("tr"); for(var i=1;i<trlist.length;i++) { var tr=$(trlist[i]); var input=tr.find("INPUT[type='checkbox']"); input.attr("checked",evt.checked); } } //方法三: //全选或全不选 此传入的参数为this 如:checkAll(this) function checkAll(evt) { $("#table1 tr").find("input[type='checkbox']").each(function(i){ $(this).attr("checked",evt.checked) }); } //方法四: //全选或全不选 此传入的参数为this 如:checkAll(this) function checkAll(evt) { $("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked); }
11、客户端动态添加行、删除行
function btnAddRow() { //行号是从0开始,最后一行是新增、删除、保存按钮行 故减去2 var rownum=$("#table1 tr").length-2; var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>"; var text="<input type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/>"; var sel="<select id='sel_"+rownum+"'><option value='1'>男</option><option value='0'>女</option></select>"; var row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>"; $(row).insertAfter($("#table1 tr:eq("+rownum+")")); } //客户端删除一行 //每次只能删除一行,删除多行时出错 function btnDeleteRow() { $("#table1 tr").find("input[type='checkbox']").each(function(i){ if($(this).attr("checked")) { if(i!=0)//不能删除行标题 { $("#table1 tr:eq("+i+")").remove(); } } }); } //这个比上面的要好,可以一下删除多个记录 function btnDeleteRow() { $("#table1 tr").each(function(i){ var chk=$(this).find("input[type='checkbox']"); if(chk.attr("id")!="checkall")//不能删除标题行 { if(chk.attr("checked")) { $(this).remove(); } } }); } //客户端保存 function btnSaveClick() { //find()方法中我暂时不知道如何设定多个筛选条件,所以下面得不到select列表的值 //$("#table1 tr td").find("input[type='text']" || "select").each(function(i){ //alert($(this).val()); //}); $("#table1 tr").find("td").each(function(i){ if($(this).find("input[type='text']").length>0) { alert($(this).find("input[type='text']").val()); } else if($(this).find("select").length>0) { alert($(this).find("select").val()); } }); }
<style type="text/css"> .hover { background-color:red; } </style> <table id="table1" border="1" cellpadding="0" cellspacing="0"> <tr> <th> <input type="checkbox" id="checkall" onclick="checkAll1(this)"/> </th> <th>姓名</th> <th>性别</th> <th>密码</th> <th>地址</th> </tr> <tr> <td> <input type="checkbox" id="Checkbox1" /> </td> <td>张三</td> <td>男</td> <td>zhangsan</td> <td>上海</td> </tr> <tr> <td> <input type="checkbox" id="Checkbox2" /> </td> <td>李四</td> <td>男</td> <td>lisi</td> <td>安庆</td> </tr> <tr> <td> <input type="checkbox" id="Checkbox3" /> </td> <td>王五</td> <td>男</td> <td>beijing</td> <td>北京</td> </tr> <tr> <td> <input type="checkbox" id="Checkbox4" /> </td> <td>无名氏</td> <td>女</td> <td>wumingshi</td> <td>上海</td> </tr> <tr> <td> <input type="checkbox" id="Checkbox5" /> </td> <td>赵老师</td> <td>男</td> <td>zhaolaoshi</td> <td>浙江</td> </tr> <tr> <td colspan="5" align="center"> <input type="button" id="btnAdd" runat="server" value="新增" onclick="btnAddRow()" /> <input type="button" id="btnDelete" runat="server" value="删除" onclick="btnDeleteRow()" /> <input type="button" id="btnSave" runat="server" value="保存" onclick="btnSaveClick()" /> </td> </tr> </table>
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-10
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15
- 有时我们在页面上需要选择数值范围,如购物时选取价格区间,购买主机时自主选取CPU,内存大小配置等,使用直观的滑块条直接选取想要的数值大小即可,无需手动输入数值,操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-05
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧。废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过,不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
- JQuery使我们在开发Ajax应用程序的时候提高了效率,减少了许多兼容性问题,我们在Ajax项目中,遇到ajax异步获取数据出错怎么办,我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03- 这篇文章主要介绍了jQuery获得字体颜色16位码的方法,涉及jQuery样式操作及正则表达式使用技巧,非常简单实用,需要的朋友可以参考下...2016-02-23
jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
借助jQuery我们可以轻松地堆DOM元素进行向上、向下遍历以及同级的遍历,本文我们即来整理jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结:...2016-07-25- jquery中jquery.offset().top / left用于获取div距离窗口的距离,jquery.position().top / left 用于获取距离父级div的距离(必须是绝对定位的div)。 (1)先介绍jquery.offset().top / left css: 复制代码 代码如下: *{ mar...2013-10-13
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用动鼠标,只需按...2015-10-23
- 在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互目的....2016-04-27
- 直接为大家介绍制作过程,希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30