在 <h2/> 标题中显示来自 JS Table 的 html 数据

Question

我有一个 JS table 由用户在我网站上的文本区域中输入的数据生成（因此当您第一次加载页面时数据不存在：您必须在文本区域中输入一些内容并且然后生成 table)。现在我正在尝试获取该数据（来自生成的 table）并将其显示在 (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。

Answer 1

您需要在 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>

Answer 2

你的问题似乎是你的表达式周围的额外 " 以获得值。

如果一个值已经是一个字符串，则不需要将其用引号引起来，因为这样做会使 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>

Answer 3

好的，解决了！感谢大家让我走上正轨 :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）

希望对某人有所帮助！

干杯

在 <h2/> 标题中显示来自 JS Table 的 html 数据

Show html data from a JS Table in a <h2/> title

html

javascript

java

get

getelementbyid

编辑：