如何创建一个可以使用JS更改数据的html表

Question

我正在尝试创建一个在线计算器，使用一个表，带有一个标记，将有一个变化的输出。输出是在计算器上使用的任何数学函数的结果。所以如果有人输入5*5，第th应该是25。我尝试在javascript中使用变量，输出，然后使用document.getElementsByTagName(" the "). innerhtml(输出)，让它改变，但那不起作用。然后我尝试了相同的命令没有变量，而不是直接在innerHTML中插入字符串，它仍然不起作用。我也试过write()，但也不起作用。你知道我该怎么做吗?

这是我的表(id和类只是一些样式属性在我的css文件):

<table class="center" style = "width:20%">
<tr>
<th colspan="4" id = "final">0</th>
</tr>
<tr id = "opRow">
<td>+</td>
<td>-</td>
<td>x</td>
<td>/</td>
</tr>
<tr class = "dataRow">
<td>7</td>
<td>8</td>
<td>9</td>
<td rowspan = "4" id = "eqBut">=</td>
</tr>
<tr class = "dataRow">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr class = "dataRow">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr class = "dataRow">
<td style = "width:26%" id = "acBut">ac</td>
<td>0</td>
<td>.</td>
</tr>
</table>

Answer 1

getElementsByTagName()返回一个数组，因此您必须像这样引用它:

document.getElementsByTagName("th")[0]

假设当前页面上只有1个th标签。

+innerHTML是一个元素的属性，而不是一个方法，所以你必须重写:

document.getElementsByTagName("th")[0].innerHTML = output

另外，你当前的实现应该在浏览器控制台日志中抛出一些错误，请检查一下。

Answer 2

方法/函数

getElementsByTagName

是返回一个数组与所有可用的标签从你的html，然后你只有1在你的表所以结果th标签从你的表是第一个[0]，现在使用方法提及选择th标签和选择第一个元素[0]

innerHTML -用于重写数据

并使用它来重写cell。

使用

document.getElementsByTagName("th")[0].innerHTML = 52;

检查是否正常运行:

document.addEventListener("DOMContentLoaded", function(){
document.getElementsByTagName("th")[0].innerHTML = 52;
});

好吧，我希望你明白我想说的话。谢谢。