www.5197.com-澳门新蒲京娱乐场官网

热门关键词: www.5197.com,澳门新蒲京娱乐场官网

jQuery操作表格的常用方法、技巧汇总-Web前端之家

遗憾的是,我们 google 出来的用 javascript 隐藏列的方式,都是采用这样的代码。 实际上,我们可以用设置第一行的 td 或 th 的宽度为 0 的方式,来快速隐藏列。 我们把 hideOrShowCol() 函数改为如下代码:复制代码 代码如下:function hideOrShowCol { var t1 = time2stamp(); // var table = tableBox.children[0]; var tr = table.rows[0]; tr.children[colIdx].style.width = isShow ? 200 : 0; var t2 = time2stamp(); alert " 毫秒"); }不过,仅这样还达不到隐藏的效果,还需要设置 table 和 td 样式为如下:复制代码 代码如下:

11.客户端动态添加行复制代码 代码如下:function btnAddRow(){ //行号是从0开始,最后一行是新增、删除、保存按钮行 故减去2 var rownum=$.length-2; var chk=""; var text=""; var sel="男女"; var row="

重新测试,我们发现,隐藏千行表格的某列,只需要不到 15毫秒的时间。而即使用 createTable 创建万行表格,再来测试,也只需要 60 毫秒的时间(都是以我的笔记本上的执行时间为参照。实际上,你们大多数人的电脑配置都比我的笔记本高很多,因此时间会更短),效率十分令人满意。 补充: 根据 无常 网友的提议,加上了对 colgroup 处理的代码。奇怪的是,虽然处理原理完全一样,但对 colgroup 进行处理的时间达到了 140毫秒,即延长了一倍。尚不清楚原因。 完整代码: 复制代码 代码如下:

" text "

隐藏表格列,最常见的是如下方式:复制代码 代码如下:td.style.display = "none";这种方式的效率极低。例如,隐藏一个千行表格的某列,在我的笔记本上执行需要约 4000毫秒的时间,令人无法忍受。例如如下代码:复制代码 代码如下:

插入

').insertAfter);9.获取每一行指定的单元格的值复制代码 代码如下:var arr = [];$('#table1 tr td:nth-child.each { arr.push;var result = arr.join;10.全选或全不选复制代码 代码如下://方法零:$.on { $.prop('checked', this.checked); // 给当前一起绑定的子选择添加效果});

//方法一://全选或全不选 此传入的参数为event 如:checkAllfunction checkAll{evt=evt?evt:window.event;var chall=evt.target?evt.target:evt.srcElement;var tbl=$;var trlist=tbl.find;for(var i=1;i

" text "

以下列出13个jQuery操作table常用到的功能:

"; $.insertAfter($("#table1 tr:eq; }12.客户端删除一行复制代码 代码如下:每次只能删除一行,删除多行时出错function btnDeleteRow.find("input[type='checkbox']").each{ if.attr{//不能删除行标题 $").remove;}这个比上面的要好,可以一下删除多个记录function btnDeleteRow.each{ var chk=$.find("input[type='checkbox']"); if!="checkall"){//不能删除标题行 if{ $; } } });}13.客户端保存复制代码 代码如下:function btnSaveClick方法中我暂时不知道如何设定多个筛选条件,所以下面得不到select列表的值 //$.find("input[type='text']" || "select").each{ //alert; $.find.each{ if.find.length>0){ alert.find.val.find { alert.find; } });}

" sel "

1.鼠标移动行变色复制代码 代码如下:$.hover.children.addClass{ $.removeClass;方法二:复制代码 代码如下:$.hover.children.addClass; }, function.children.removeClass;

" text "

2.奇偶行不同颜色复制代码 代码如下:$('#table1 tbody tr:odd').css('background-color', '#bbf');$('#table1 tbody tr:even').css('background-color','#ffc');//操作class$("#table1 tbody tr:odd").addClass;$("#table1 tbody tr:even").addClass;3.隐藏一行复制代码 代码如下:$('#table1 tbody tr:eq;$("#table1 tr td::nth-child;$.each{$.hide;4.隐藏一列复制代码 代码如下:$('#table1 tr td::nth-child;5.删除一行复制代码 代码如下:// 删除除第一行外的所有行$('#table1 tr:not;// 删除指定行$.remove();6.删除一列复制代码 代码如下:// 删除除第一列外的所有列$('#table1 tr th:not.remove();$('#table1 tr td:not.remove();// 删除第一列$('#table1 tr td::nth-child;7.得到某个单元格的值复制代码 代码如下:// 设置table1,第2个tr的第一个td的值。 $ td:nth-child; // 获取table1,第2个tr的第一个td的值。$ td:nth-child;8.插入一行复制代码 代码如下:// 在第二个tr后插入一行$('

" chk "

插入

插入3

插入

本文由www.5197.com发布于服务器运维,转载请注明出处:jQuery操作表格的常用方法、技巧汇总-Web前端之家