用javascript如何从tr中分别获得每个td的元素

JavaScript014

用javascript如何从tr中分别获得每个td的元素,第1张

js获取表格中每行的td元素方法:

<script>

var tb = document.getElementById("tb") //根据id找到这个表格

    var rows = tb.rows              //取得这个table下的所有行

    for(var i=0i<rows.lengthi++)//循环遍历所有的tr行

    {

      for(var j=0j<rows[i].cells.lengthj++)//取得第几行下面的td个数,再次循环遍历该行下面的td元素

      {

         var cell = rows[i].cells[j]//获取某行下面的某个td元素

       alert("第"+(i+1)+"行第"+(j+1)+"格的数字是"+cell.innerHTML)//cell.innerHTML获取元素里头的值  

}

}

</script>

拓展使用jq几行命令就能实现获取td的值

$("#tb tr td").each(function(i, v){    //针对tb表格下的所有td进行遍历

        alert("第"+(i + 1)+"格的数字是"+$(this).text())//返回当前td下的值

})

<html>

<body>

<table border="1" id="table1">

<tr id="row1">

<td>01</td>

<td>02</td>

</tr>

<tr id="row2">

<td>11</td>

<td>12</td>

</tr>

</table>

<script type="text/javascript">

//-----------第一种方法----------------

var row = document.getElementById("row1") //只针对 row1这个元素的子节点查找

var cells = row.getElementsByTagName("td")// 找到这个tr下的所有td,不能用childNodes 属性,部分浏览器不兼容

for(var i=0i<cells.lengthi++){

alert("第"+(i+1)+"格的数字是"+cells[i].innerHTML)

}

alert("开始方法2")

//-----------第二种方法,操作表格比较标准的代码----------------

var tab = document.getElementById("table1") //找到这个表格

var rows = tab.rows //取得这个table下的所有行

for(var i=0i<rows.lengthi++)

{

for(var j=0j<rows[i].cells.lengthj++)

{

var cell = rows[i].cells[j]

alert("第"+(i+1)+"行第"+(j+1)+"格的数字是"+cell.innerHTML)

}

}

</script>

</body>

</html>

<!-----------

把以上代码保存为一个.html文件打开看一下你就明白了

,包含了相关的JS代码

-------->

//TD节点

var TDElement = YourTD

//TR节点

var TRElement

if(TDElement != null)

{

TRElement = TDElement.parentElement

}

另外TD,TR都可以指定ID属性,有了ID找起来方便