以前都说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");
});

<table id ="cartable" >
<tr id ="title">
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
<td>***</td>
</tr>
</table>

<table id ="cartable" >
              <tr id ="title">
                <td>***</td>
                <td>***</td>
                <td>***</td>
                <td>***</td>
                <td>***</td>
                <td>***</td>
                <td>***</td>
              </tr>
          </table>

//方法一:
//全选或全不选 此传入的参数为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); // 给当下一块绑定的子采用增添效果
});

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

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