如何使用可以使用 JS 更改的数据创建 html table

Question

我正在尝试创建一个在线计算器，使用 table，其标签的输出会发生变化。输出是计算器上使用的任何数学函数的结果。所以如果有人输入 5*5，th 应该显示 25。我尝试在 javascript 中使用变量输出，然后使用 document.getElementsByTagName("th").innerHTML(output)，来让它改变，但那没有用。然后我尝试了没有变量的相同命令，而是直接在 innerHTML 中插入一个字符串，但它仍然无法正常工作。我也试过 write()，但也没有用。关于我可以尝试什么的任何想法？

这是我的 table（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() returns 一个数组，所以你必须像这样引用它：

document.getElementsByTagName("th")[0]

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

plus innerHTML 是元素的属性而不是方法，因此您必须重写：

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

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

Answer 2

方法/函数

getElementsByTagName

正在返回一个数组，其中包含来自您的 html 的所有可用标签，那么您的 table 中只有第 1 个，结果是来自您的 [=31] 的 th 标签=] 是第一个 [0]，现在使用方法提到 select th 标记和 select 第一个元素 [0]

innerHTML - used to rewrite data as I know

并用它来重写单元格。

所以使用那个：

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

要检查是否有效，试试这个：

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

嗯，我希望你明白我想说的。谢谢。

如何使用可以使用 JS 更改的数据创建 html table

How to create an html table with data that can change using JS

html

javascript

html-table

dynamic