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

JavaScript031

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

<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代码

-------->

有两种方法可以获取tr下的第二个td元素:

1、使用css选择器,$("tr td:nth-child(2)")。

2、使用遍历函数eq()。

下面就以上两个方法进行实例演示:单击按钮改变所有行的第二个单元格的样式,单击任意行改变该行第二个单元格的样式。

1、HTML结构

<table id = "test">

<tr><td>1</td><td>1</td><td>2</td><td>3</td></tr>

<tr><td>2</td><td>4</td><td>5</td><td>6</td></tr>

<tr><td>3</td><td>7</td><td>8</td><td>9</td></tr>

<tr><td>4</td><td>1</td><td>2</td><td>3</td></tr>

</table>

<input type="button" id="btn" value="设置">

2、jquery代码

$(function(){

$("#btn").click(function() {

$("#test tr td:nth-child(2)").addClass('red')

})

$("#test tr").click(function() {

$(this).children('td').eq(1).addClass('red')

})

})

3、效果演示

js中获取tr的首个td的方法如下:

比如有如下表格table:

<tr id="value_12">

<td>firstanme_1</td>

<td>lastname_1</td>

</tr>

<tr id="value_14">

<td>firstanme_2</td>

<td>lastname_2</td>

</tr>

用js获取的方法定义:

$('#table_id tr').each(function() {

var firstName = $("td", tr)[0].val()

var id = $(tr).attr('id').split("_")[1]

})