js獲取table的tr

1. js控制table特定tr的背景顏色

代碼如下：

<script>

//js放到table下，才能檢測到tr數組

var trs = document.getElementById("tableBox").getElementsByTagName("tr");

var trs=document.getElementById("tableBox").getElementsByTagName("tr");

$(function(){

for(var i=0;i<trs.length;i++){

trs[i].onmousedown = function(){

mousedownclick(this);

}

}

});

function mousedownclick(obj){

for(var j=0;j<trs.length;j++){

if(trs[j]==obj){

trs[j].style.background='blue';

}else{

trs[j].style.background='';

}

}

}

</script>

(1)js獲取table的tr擴展閱讀

js操作table的各種用法：

(1)得到table 中tbody 的內容 ：$('#simple-table').find('tbody').html();

(2)點擊td時，獲取點擊的行號：

$('#simple-table tbody').on( 'click', 'td', function (e) {

normalRowIndex = $(this).parent().index(); //行號

console.log("正常工作錶行："+normalRowIndex);

});

(3)為table追加一行：

function addNormalTR(){

$('#simple-table').find('tbody').append(trtd); //tdtd為拼接的trtd 的html內容。

}

(4) 點擊td中的元素獲取，當前行號： obj.parentNode.parentNode.rowIndex;//obj 為元素對象

2. html JS 獲取tr/td 表單元素下面的各個值

這是獲來得每個源tr 中td 的內容
<script>
$('#myTableProct tr').each(function(index,ele){
$(this).find('td').each(function(index,ele){
alert($(ele).html());
})
})
</script>
不用謝我

------君少

3. js 遍歷 tr

我估計你是這么做的

for tr in table.trs
tr.td(第3個).add(click);

是不是?
如果是,那麼你取第3個做法是錯誤的!
就以你這個例子來講,第2行就該取td(第2個)

4. js 通過td的id值 如何拿到tr的id值(動態獲取)

錯誤出在document.getElementById(dd)
因為頁面上id為2的出現了多個，而這樣獲取只會取到第一個，所以tr始終為相應的第1個.

按照你的寫法，用dd來保存tr的行數比較好，即i值。
然後通過document.all.table1.rows(i).id來獲取tr的id值。

5. JS怎樣使用appendChild 給table 增加tr td

insertRow（）函數可以帶參數，形式如下： 這個函數將新行添加到index的那一行前，比如insertRow（0），是將新行添加到第一行之前，默認的insertRow（）函數相當於insertRow（－1），將新行添加到表的最後。

<scriptlanguage="javaScript">

vart＝document．getElementById（＂test＂）；

t.innerHTML="<tr><td>數據</td></tr>";

／／或者

vart＝document．getElementById（＂test＂）；

vartr＝document．createElement（＂tr＂）；

vartd＝doucment．createElement（＂td＂）；

td．innerHTML＝＂數據＂；

tr．appendChild（td）；

t．appendChild（tr）；

｝

</script>

(5)js獲取table的tr擴展閱讀：

給table添加一行

1、＄（＂＃addTable＂）．click（function（）｛；

2、vartr="<tr>"+；

3、"<td>11</td>"+；

4、"<td>22</td>"+；

5、"<td>33</td>"+；

6、"<td>44</td>"+；

7、"<td>55</td>"+；

8、"</tr>";

9、＄（＂．layui－table＂）．append（tr）；

6. js如何動態創建tr

<tableid="mytab"></table>

document.getElementById('mytab').innerHTML='<tr>這是創建的tr</tr>';

7. 獲得當前tr的第二個td的值,用js寫

this.children[1].innerHTML

8. JS可以實現點擊表格tr讓其變成可編輯輸入的狀態么

可以實現的。具體的實現方式如下，在點擊表格中的tr時，使用createElement創建input元素，然後append到每個td中，這樣就實現了點擊表格可編輯的效果。

9. js如何獲取表格中某一行的單元格數

javascript提供了獲取表格中某一行單元格數的代碼，參考如下：

document.getElementById('first').cells.length//獲取id為first的行的單元格數目

實例演示如下：

1. 創建Html元素

   <divclass="box">
   	<span>實例演示：獲取表格第一行的單元格數量</span><br>
   	<divclass="content">
   	<table>
   	<trid="first"><td>1</td><td>2</td><td>3</td></tr>
   	<tr><td>4</td><td>5</td><td>6</td></tr>
   	<tr><td>7</td><td>8</td><td>9</td></tr>
   	</table>
   	<inputtype="button"value="獲取表格第一行的單元格數量"onclick="fun_get()">
   	</div>
   </div>

2. 簡單設置一下css樣式

   div.box{width:300px;padding:20px;margin:20px;border:4pxdashed#ccc;}
   div.box>span{color:#999;font-style:italic;}
   div.content{width:250px;margin:10px0;padding:20px;border:2pxsolid#ff6666;}
   table{border-collapse:collapse;}
   td{width:80px;height:30px;line-height:30px;text-align:center;border:1pxsolidgreen;}

3. 編寫jquery代碼

   <script>
   functionfun_get(){
   	alert(document.getElementById('first').cells.length);
   }
   </script>

4. 觀察效果