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"