如何在某个<tr>中选择某个<td>的值/内部HTML?仅使用 Javascript.没有jQuery

How to select value/innerHTML of a certain <td> within a certain <tr>? Using Javascript only. No jQuery

本文关键字：HTML Javascript jQuery 内部 没有 选择 tr 的值 td      更新时间：2023-09-26
<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，请告诉我如何操作。

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

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

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

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

<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);
}
相关文章：