【问题标题】：Show html data from a JS Table in a <h2/> title在 <h2/> 标题中显示来自 JS 表的 html 数据
【发布时间】：2020-04-24 16:54:30
【问题描述】：

我有一个 JS 表格，由我网站上的用户在 textarea 中输入的数据生成（所以当您第一次加载页面时数据不存在：您必须在 textarea 中输入内容然后生成表格）。现在我正在尝试获取该数据（从生成的表中）并将其显示在 (h2/) 中，例如。

所以我编写了一个脚本来获取该信息：

<script type="text/javascript">
    function buttonTEST()
    {
        document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
    }
</script>

以及使用该脚本的按钮：

<input id=GetTest type="button" onclick="buttonTEST()" value="TEST ME"/>

当我在控制台输入“document.getElementById..etc”时，它显示了我想要的数据，所以我认为脚本很好。

但我怎样才能让它以 (h2) 纯文本形式显示该数据（字母数字）？

有人可以帮忙吗？ :)

编辑！ 我试过这个：

<div>
<script type="text/javascript">function buttonTEST(){document.getElementById("yourID").innerHTML="document.getElementById('excel_table1').getElementsByTagName('tr'). 
[0].cells[1]";
}
</script>

<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>

</div>

但是当我点击时，我只是得到 "document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1]" 作为 H2。

【问题讨论】：

是否有什么东西阻止你做document.getElementsByTagName('h2')[0].innerHTML = 'the content you want'？
@vhoyer，我可能只是不知道如何正确使用它，但我试过了，并将“你想要的内容”替换为“document.getElementById('excel_table1').getElementsByTagName( 'tr')[0].cells[1].innerHTML" 这是我想显示为 h2 的单元格，但它不起作用。我认为在我的脚本中，我没有正确地“指路”到那个单元格。是这样吗？
好吧，访问w3schools page for tables 并在控制台上运行它：document.getElementsByTagName('h1')[0].innerHTML = document.getElementById('customers').getElementsByTagName('tr')[0].cells[0].innerHTML 为我执行所描述的所需行为，你能告诉我它是否适合你吗？
是的，我从 w3schools 页面获取了“公司”（红色）的表格。但实际上，当我运行“document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;”时在我页面的控制台上，它也获得了我想要的正确数据。问题是在 h2 上显示它！
那么，您能否编辑您的问题以在页面上添加有关h2 的更多信息以及您将值分配给所述h2 的方式？我认为这将帮助我们更好地帮助您：D

标签： javascript java html get getelementbyid

【解决方案1】：

在你的情况下，问题似乎是你的表达式周围额外的" 来获取值。

如果一个值已经是一个字符串，你不需要用引号括起来，因为这样做会让 javascript 认为你想把那段代码写到 h2 输出中

<div>
<script type="text/javascript">
function buttonTEST() {
  document.getElementById("yourID").innerHTML = document.getElementById('excel_table1').getElementsByTagName('tr').
[0].cells[1].innerHTML;
}
</script>

<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>

</div>

【讨论】：

是的，我也看到了！所以当我执行 document.getElementById("yourID").innerHTML=document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1];在控制台中，结果（来自单元格的数据）出现在控制台上。但我在 h2 区域得到 [object HTMLTableCellElement] ...
我刚刚纠正了这一点，我们忘记在cells[1] 的末尾添加.innerHTML 所以我们只将innerHTML 作为字符串而不是hole 元素（就像我们之前所做的那样）

【解决方案2】：

好的，解决了！感谢大家让我走上正轨：D

那么，什么对我有用：

<script type="text/javascript">

     function buttonTEST()
     {
document.getElementById('yourID').innerHTML=document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
}
</script>

<h2 id="yourID"></h2>
<input id="anotherID" type="button" onclick="buttonTEST()" value="TEST ME"/>

</div>

@vhoyer 是对的，我需要去掉多余的 " 否则 JS 认为我想把那段代码写到 h2 输出中。

另一个想法是，在我的所有 tr 和单元格之后，我需要再次放入“.innerHTML”（是的，它在另一个 .innerHTML xD 中创建了一个 .innerHTML）

希望对某人有所帮助！

干杯

【讨论】：

【解决方案3】：

您需要在您的 html 文件中创建一个 <h2> 元素，以使用 javascript 替换其值（在您的 html 文件中应该为空）。

确保您已为 <h2> 分配了一个 ID。

然后，使用 document.getElementById，在您的脚本中访问它并进行更改。

下面是一个例子。

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  </head>
  <body>
    <h2 id="yourID"></h2>
    <input id="anotherID" type="button" onclick="buttonTest()" value="TEST ME"/>
    <script>
      function buttonTest() {
        //Grab the ID and change it
        document.getElementById("yourID").innerHTML = "whatever you want it to display";
      }
    </script>
  </body>
</html>

另外，请确保将 html 属性的值括在单引号或双引号中。

编辑：

以下是您的用例示例：

 <!DOCTYPE html>
 <html>

 <head>
   <meta charset="UTF-8">
   <title>title</title>
 </head>

 <body>
   <h2 id="yourID"></h2>
   <input id="anotherID" type="button" onclick="buttonTest()" value="TEST ME" />
   <p>Press me to find out the second cell in the second row</p>
   <table id="table">
     <tr>
       <th>Color</th>
       <th>Object</th>
     </tr>
     <tr>
       <td>Red</td>
       <td>Poppy</td>
     </tr>
   </table>
   <script>
     function buttonTest() {
       //Here we grab the value of the second cell in the second row in a variable called value. You can change the row and cell index to access specific values.
       var value = document.getElementById("table").rows[1].cells[1].innerHTML;
       //Then we display it
       document.getElementById("yourID").innerHTML = value;
     }
   </script>
 </body>

 </html>

【讨论】：

感谢小猴子的帮助！我试过了，但是如何从我的表中访问数据：('excel_table1') 第一行：('tr')[0] 第二个单元格：cells[1].innerHTML？我尝试将 document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML 放在你写“无论你想让它显示什么”的地方，但它没有用......跨度>
试试我添加的例子。您可以更改 rows 集合和 cells 集合的索引值以获得不同的值。