如何在某个 <tr> 中选择某个 <td> 的 value/innerHTML？仅使用 Javascript。没有 jQuery

Question

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

目标： 让按钮button1 和button2 触发相同的function get()，这应该在按钮所在的<tr> 中获得第一个<td> 的值. 在这种情况下，分别是：foo1 和 foo2。

这是一个粗略的功能大纲，应该有助于理解我想要实现的目标-

function get(element){
  alert(element.tr.first_td.innerHTML);
}

我意识到有一个类似问题的 jQuery 解决方案。但我对 jQuery 的理解还不够好，无法将它翻译回 JavaScript。如果可以使用 JavaScript，请告诉我如何使用。

Answer 1

向上爬parentNode 两次以到达tableRow 元素。从那里，从单元格的 HTMLCollection 中访问第一个 td，并获取 innerHTML 值：

function find( element ) {
    alert( element.parentNode.parentNode.cells[0].innerHTML );
}​

小提琴：http://jsfiddle.net/jonathansampson/WuWnw/

Answer 2

试试这个，因为你有很多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);
}

如果您不想提供 ID，并且您确定只有一张桌子，请使用：

var table = document.getElementsByTagName("table");
var cells = table[0].getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
    alert(cells[i].innerHTML);
}

享受吧！希望这可以帮助！ :) 没有jQuery 或任何其他插件。纯 JavaScript。 :)

Answer 3

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

您应该使用 ID 确定您想要获取的内容，以便轻松检索它。这也有助于防止获得错误数据的机会。如果您给组件一个 id，您应该能够使用 document.getElementById() 来获取该组件。

function get(element){
  var obj = document.getElementById(element)
  alert(obj.innerHTML);
}