HTML中js操作table

一、获取每一个tr

1、通过table的id获取，如id="tables"

 获取第一行tr，索引从0开始，用eq(),方法里面的索引可以手动更换，如第二行就是1，也可以循环tr，eq里面就是循环变量

 $("#tables tr").eq(0);
//遍历每一行

  for (var i = 0; i < $("#tables tr").length; i++) {
    $("#tables tr").eq(i);
  }

2、通过tbody获取tr，id="tbodys"，aa的值可自行设置相应的索引，关键字“find”，子级

$("#tbodys").find('tr').eq(aa);

3、获取操作本行tr，如果tr内部某个元素要操作本行，比如行内删除按钮或者编辑按钮，<input type="text"   onclick="TrDemo(this);" />，

这里建议将点击事件写在标签内部，传this过去，静态行可以直接在js中写点击事件，用$(this)操作，动态行这样是无效的，必须在标签内部传this，才可以操作，关键字：“closest”

function TrDemo(temp) {
   $(temp).closest('tr')
}

4、获取上一行tr，关键字：prev 上一行

$(this).closest('tr').prev()

5、获取下一行tr，关键字：next 下一行

$(this).closest('tr').next()

6、获取最后一行tr，关键字last，这里用tbody操作示例，id="tbodys"

$("#tbodys").find('tr:last')

二、td的操作获取方式

  td是通过tr获取，tr的操作根据上面所述，这里就不详细写tr的操作，用$("#tr")代替

1、获取一行中每一个td，关键字“children”

$("#tr").children('td').eq(aa)//aa可以设置任何自己需要的索引值

//遍历td
for (var i=0;i<$("#tr").children('td').length;i++){
   $("#tr").children('td').eq(i)
}

2、获取td里面的值

//如果td内部没有子级，那直接获取td值是text(),aa可以自行设置自己所需td的索引值
$("#tr").children('td').eq(aa).text();

//如果内部有子级，可根据所要获取的层级，用find('#id')/find('.class')获取,id和class可根据自己设置的填写
//比如获取第一个td里面文本框的值，id="txt"
$("#tr").children('td').eq(0).find('#txt').val();

3、操作行内元素，表格里面的元素也是可以根据上面方法获取并操作的，具体操作在获取到之后和普通jquery操作一样

     这里举例隐藏td内的某个表单元素和设为只读，文本框id="txt"

//隐藏
$("#tr").children('td').eq(aa).find('#txt').css("display","none");

//只读
$("#tr").children('td').eq(aa).find('#txt').attr("disabled","disabled");

三、添加/删除tr，关键字：添加（prepend, append），删除（remove）

tr的删除也是可以按照上面所述的tr操作中，获取某一行的上一行或者下一行或者本行进行删除，这里用$("#tbodys")代表tbody，$("#tr")代表要操作的行，

//添加
//先将要添加行的html代码拼接好，赋值到变量中，这里我就不拼接了，用trhtml代替
var tr=trhtml;

//插入在第一行之前，成为首行
$("#tbodys").prepend(tr);

//插入到末尾最后一行
$("#tbodys").append(tr);

//删除行
$("#tr").remove();

四、合并行，合并列

1、合并列：colspan，在td/th标签里使用此属性合并相应数量单元格，合并的数量就是colspan的赋值，如colspan="2"

2、合并行：rowspan，在td标签里使用此属性合并相应数量单元格，合并的数量就是rowspan的赋值，如rowspan="2"