以前都说jQuery的兼容性是绝对可靠的，复制代码

作者：前端发布：2019-09-06

想用jquery将title前面的tr移除了，就用了语句： $("#title~tr").remove() ;结果在火狐下能够移除，在IE下不能够移除，小编晕了，后来换了种写法，改成:$("#title").siblings("tr").remove();,那样试一下，果然能够了，哈哈，看来jQuery尽管好用，不过用的不当，依旧会出标题啊！

前日用jQuery操作table时，出现了叁个包容性的难题，此前都说jQuery的包容性是纯属可靠的，明日察觉了这些bug，哈哈！

1.鼠标移动行变色

: 复制代码代码如下: table id ="cartable" tr id ="title" td***/td td***9159.com，/td td***/td td***/td td***/td td***/td td***/td /tr /table 想用jquery将title后面...

5.删减一行

复制代码代码如下:

PS：table的另外数据也是用jQuery填充步向的。

$("#table1 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});

//方法一：
//全选或全不选此传入的参数为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);
}

PS：table的别样数据也是用jQuery填充步入的。

粗粗是这般的:

以下列出10个jQuery操作table常用到的功能：

大意是那样的:

想用jquery将title前面包车型地铁tr移除了，就用了语句： $("#title~tr").remove() ;结果在火狐下能够移除，在IE下不可能移除，作者晕了，后来换了种写法，改成:$("#title").siblings("tr").remove();,那样试一下，果然能够了，哈哈，看来jQuery尽管好用，不过用的不当，依旧会出难点呀！

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 ")"));
}

4.潜藏一列

11.顾客端动态增加行

$('#table1 tr').hover(function(){
$(this).children('td').addClass('hover')
}, function(){
$(this).children('td').removeClass('hover')
});

复制代码代码如下:

var arr = [];
$('#table1 tr td:nth-child(1)').each(function (key, value) {
arr.push($(this).html());
});
var result = arr.join(',');

//方法零：
$('#all').on('click', function () {
$('input.checkSub').prop('checked', this.checked); // 给当下一块绑定的子采用增添效果
});

10.全选或全不选

$('#table1 tr td::nth-child(3)').hide();

复制代码代码如下:

// 删除除第一列外的有着列
$('#table1 tr th:not(:nth-child(1))').remove();
$('#table1 tr td:not(:nth-child(1))').remove();
// 删除第一列
$('#table1 tr td::nth-child(1)').remove();

$('#table1 tbody tr:odd').css('background-color', '#bbf');
$('#table1 tbody tr:even').css('background-color','#ffc');
//操作class
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass("even");

$('#table1 tbody tr:eq(3)').hide();
$("#table1 tr td::nth-child(3)").hide();
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

复制代码代码如下:

13.顾客端保存

复制代码代码如下:

// 删除除第一行外的具备行
$('#table1 tr:not(:first)').remove();
// 删除钦点行
$('#table1 tr:eq(3)').remove();

// 在第贰个tr后插入一行
$('<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>').insertAfter($('#table7 tr:eq(1)'));

复制代码代码如下:

8.插入一行

方法二：

复制代码代码如下:

9.收获每一行钦赐的单元格的值

3.潜伏一行

12.客户端删除一行

// 设置table1,第三个tr的首先个td的值。
$('#table1 tr:eq(1) td:nth-child(1)').html('value');
// 获取table1,第三个tr的首先个td的值。
$('#table1 tr:eq(1) td:nth-child(1)').html();

7.获得（设置）有些单元格的值

复制代码代码如下:

2.奇偶行不一样颜色

历次只好删除一行，删除多行时出错
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();
     }
       }
    });
}

复制代码代码如下:

6.删减一列

复制代码代码如下:

您恐怕感兴趣的稿子:

jQuery 选取表格(table)里的行和列及改变轻巧样式
jQuery完结冻结表格行和列
jQuery实现表格行和列的动态增加与删除方法【测量检验可用】
依靠JQuery的动态删除Table表格的行和列的代码
jquery如何判别表格同一列差别行input数据是还是不是再度
jquery通过select列表采取框对表格数据举行过滤示例
jQuery表格插件datatables用法总结
jQuery达成鼠标可拖动调度表格列宽度
JQuery 表格操作(交替展现、拖动表格行、选择行等)
jQuery CSS实现的table表格行列转置效能示例

复制代码代码如下:

本文由9159.com发布于前端,转载请注明出处：以前都说jQuery的兼容性是绝对可靠的，复制代码

关键词： 9159.com

上一篇：只是为了演示使用ajaxSubmit异步上传图片及保存数
下一篇：没有了