javascript 在点击时获取外部表行

Question

我有一个按钮:

<button id="external-list-row">Test</button>

我想在单击时更改外部表中的一行。外部表的结构是这样的；

<table id="table_id">

<thead> 
<tr> 
    <th>X</th> 
    <th>Y</th> 
</tr> 
</thead> 

<tbody>
<tr> 
    <td> 
      <p>Row 1</p>
    </td> 
</tr>
<tr> 
    <td> 
      <p>Row 2</p>
    </td> 
</tr>
<tr> 
    <td> 
      <p>Row 3</p>
    </td> 
</tr>
</tbody> 

</table> 

所以我的问题是这样的；如何使用 JavaScript 将按钮中的“测试”替换为第 1 行的内容？

至于 javascript，我不确定如何从第 1 行获取内容，并用它替换按钮。

<script>
    var rows = document.getElementById('table_id').getElementsByTagName("tr");
    for (var i=0; i<rows.length; i++) {
        $('#external-list-row').onclick = function() {
        }};
</script>

<小时/>

发表评论:

我可以从同一个html文件中的其他表访问表数据，但我仍然不知道如何从其他html文件中的表访问数据。例如，如果我尝试从另一个液体文件(例如照片)访问视频液体文件，则按下按钮时不会发生任何情况。

当前代码的Fiddle。它可以用另一个列表的内容替换一个列表的内容，但列表需要位于同一个 html 文件中。 https://jsfiddle.net/hgnymydL/

Answer 1

嗯，你应该明白的第一件事是 table元素有 rows属性，因此获取第一行很简单。

var table = document.getElementById("table_id");
var firstRow = table.rows[0];

从那里，您可以使用 textContent获取该行的文本内容。我相信这就是您正在寻找的。

您还可以使用 CSS 选择器选择表格的第一行，如下所示:

var firstRow = document.querySelector("#table_id tbody tr");