如何在某个 <tr> 中选择某个 <td> 的值/innerHTML？仅使用 Javascript。没有 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10927117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select value/innerHTML of a certain <td> within a certain <tr>? Using Javascript only. No jQuery
提问by Samik Sengupta
<table>
<tr>
<td>foo1</td>
<td>bar1</td>
<td><input type="button" id="button1" onClick="get(this);"></td>
</tr>
<tr>
<td>foo2</td>
<td>bar2</td>
<td><input type="button" id="button2" onClick="get(this);"></td>
</tr>
</table>
Goal:To get buttons button1and button2to trigger the same function get()which should get the value of the first <td>in the same <tr>the button resides in. Which is, in this case: foo1and foo2respectively.
目标：要获得按钮button1并button2触发同一function get()应该得到的第一个值<td>在同一个<tr>按钮驻留在其中，在这种情况下：foo1和foo2分别。
This is a rough outline of the function which should help understand what I'm trying to achieve-
这是该功能的粗略概述，应该有助于理解我要实现的目标-
function get(element){
alert(element.tr.first_td.innerHTML);
}
I realize there was a jQuery solution to a similar problem. But I do not understand jQuery well enough to translate it back to JavaScript. If it is possible at all using JavaScript, please show me how.
我意识到有一个类似问题的 jQuery 解决方案。但我对 jQuery 的理解不够好，无法将其转换回 JavaScript。如果完全可以使用 JavaScript，请告诉我如何使用。
回答by Sampson
Crawl up the parentNodetwice to get to the tableRowelement. From there, access the first tdfrom the HTMLCollection of cells, and get the innerHTMLvalue:
爬行parentNode两次以到达tableRow元素。从那里，td从单元格的 HTMLCollection访问第一个，并获取innerHTML值：
function find( element ) {
alert( element.parentNode.parentNode.cells[0].innerHTML );
}?
回答by Praveen Kumar Purushothaman
Try this, since you have many trand tdtags right, so, you can do DOM Parsing. But you need to specify one IDfor the table to get that table. For now lets call it foo-table.
试试这个，因为你有很多tr和td标签正确的，所以，你可以做DOM解析。但是您需要ID为表指定一个以获取该表。现在让我们称之为foo-table。
var table = document.getElementById("foo-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
alert(cells[i].innerHTML);
}
If you don't wanna give an ID and you are sure that there is only one table, then use this:
如果您不想提供 ID 并且您确定只有一张桌子，请使用以下命令：
var table = document.getElementsByTagName("table");
var cells = table[0].getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
alert(cells[i].innerHTML);
}
Enjoy! Hope this helps! :) No jQueryor any other plugin. Pure JavaScript. :)
享受！希望这可以帮助！:) 没有jQuery或任何其他插件。纯 JavaScript。:)
回答by Nicholas Spragg
<table>
<tr>
<td id="button1_value">foo1</td>
<td>bar1</td>
<td><input type="button" id="button1" onClick="get('button1_value');"></td>
</tr>
<tr>
<td id="button2_value">foo2</td>
<td>bar2</td>
<td><input type="button" id="button2" onClick="get('button2_value');"></td>
</tr>
</table>
You shoul identify what you want to get using an ID so that you can easily retrieve it. This also helps prevent the chance of getting erroneous data. If you give the component an id you should be able to use document.getElementById() to get that component.
您应该使用 ID 确定您想要获取的内容，以便您可以轻松检索它。这也有助于防止获得错误数据的机会。如果你给组件一个 id，你应该能够使用 document.getElementById() 来获取该组件。
function get(element){
var obj = document.getElementById(element)
alert(obj.innerHTML);
}
