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

Posted 2023-03-25

【中文标题】如何使用可以使用 JS 更改的数据创建 html 表

【英文标题】：How to create an html table with data that can change using JS

【发布时间】：2021-12-10 17:56:09

【问题描述】：

我正在尝试使用表格创建一个在线计算器，其标签将具有更改的输出。输出是计算器上使用的任何数学函数的结果。因此，如果有人输入 5*5，th 应该显示 25。我尝试在 javascript 中使用变量 output，然后使用 document.getElementsByTagName("th").innerhtml(output) 来改变它，但是没用。然后我尝试了没有变量的相同命令，而是直接在 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>

【参考方案1】：

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

document.getElementsByTagName("th")[0]

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

加上innerHTML是元素的属性而不是方法，所以你必须重写：

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

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

【参考方案2】：

方法/功能

getElementsByTagName

正在从您的 html 返回一个包含所有可用标签的数组，那么您的表中只有第 1 个，因此结果表中的 th 标签是第一个 [0]，现在使用方法提及选择 @987654322 @标签并选择第一个元素[0]

innerHTML - 据我所知，用于重写数据

并用它来重写单元格。

所以使用它：

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

要检查是否正常，试试这个：

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

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