Javascript，如何访问一行的特定子项？

【问题标题】：Javascript, how can I access a specific child of a row?Javascript，如何访问一行的特定子项？
【发布时间】：2011-04-19 21:55:52
【问题描述】：

使用 Javascript，我如何访问行的特定子项？ Javascript（请不要使用 jQuery）。

例如：<TR> 中的第二个 <TD>，其中 ID=id33322010100167

<table>
<tr id="id33322010100167">
<td>20101001</td>
<td>918</td>
<td>919</td>
<td>67</td>
<td>CAR PROBLEM</td>
</tr>
<tr id="id33322010100169">
<td>20102001</td>
<td>913</td>
<td>914</td>
<td>62</td>
<td>LUNCHTIME</td>
</tr>
<table>

【问题讨论】：

你这里有问题，你的两个tr元素有相同的id值！
没有 jquery。必须在黑莓上工作，jquery（还没有）。还修复了元素
您接受的答案在非 IE 浏览器中不起作用。

标签： javascript html-table row

【解决方案1】：

使用 DOM，您可以获取表格，然后在保持计数的同时遍历子元素。

当然，元素 ID 应该是唯一的，以便 document.getElementById('id') 起作用。

【讨论】：

【解决方案2】：

使用jQuery:

first = $('#id33322010100167 td:first'); // gives you the first td of the tr with id id33322010100167 
last = $('#id33322010100167 td:last'); // gives you the last td of the tr with id id33322010100167

你可以使用 next() 来遍历元素

first.next();

【讨论】：

【解决方案3】：

var index = 1; // second element
var child = document.getElementById('id33322010100167').childNodes[index]

【讨论】：

你试过了吗？这将返回第一个<td>，而不是第二个，因为<tr> 的第一个子节点是一个包含空格的文本节点。
不，不是。 document.getElementById('id33322010100167').childNodes[2] 将给出另一个空白节点。另外，如果 OP 然后删除了他源代码中的所有换行符怎么办？这保留了<td> 元素的顺序，同时完全改变了childNodes 集合。
它在 IE 中也给出了与其他浏览器不同的结果，因为 IE 不考虑 childNodes 中的空白节点，而其他浏览器会考虑。

【解决方案4】：

最可靠的是cells集合，它不像非IE浏览器中的childNodes会忽略单元格之间的空白文本节点：

var td = document.getElementById("id33322010100167").cells[1];

【讨论】：

【解决方案5】：

也许你可以试试这个：

var tRow = document.getElementById("tableName").getElementsByTagName("tr");

for(var i = 0; i < tRow.length; i++){
    if(tRow[i].id == "name of your id"){
        //do something
    }
}

【讨论】：

另一个问题是示例中的<td> 元素中没有id，OP 可能不想添加它们。

【解决方案6】：

<table id="studTable" class="table table-bordered">
     <thead>
        <tr>
           <td>Click</td>
        </tr>
     </thead>
     <tbody>
           <tr><td><a href="#" onclick="ClickRow(this)">Click</a></td></tr>
     </tbody>
</table>

对于上表，您可以使用链接这个。您可以通过单击行内的行/单元格来读取所选行并读取单元格值和/或从表中删除行

function ClickRow(r) {
        console.log(r.parentNode.parentNode.cells[0].innerHTML); //Read First Cell in Row
        var i = r.parentNode.parentNode.rowIndex;
        document.getElementById("studTable").deleteRow(i); //Remove Row
    }

【讨论】：

【解决方案7】：

我发现这个解决方案是结合两个评价最高的一个：

除了使用 childNodes 之外，您还可以在该行下方获得 typ td 的元素：

var array_td = document.getElementById('id33322010100167').getElementsByTagName("td");

要获取第一个 td 的内容，您可以使用：

array_td[1]

这样做的主要好处是，您不需要在数组中处理所有空格，并且如果添加了一些新的子项（不是 tds），您不必更改索引。

【讨论】：