javascript 如何将数据添加到div中表的td单元格中

oxcyiej7  于 2022-12-10  发布在  Java
关注(0)|答案(2)|浏览(192)

我正在使用gopherjs来完成这项任务。
我只需要更改一个单元格中的数据。但我有几个相似的模板。
我可以通过id向任何元素添加数据。但是在这种情况下,我想知道我是否做错了什么。
现在我只是直接通过id获取元素,但我想知道是否需要更具体地了解行、表和div。
我有下表:

<div class="container">
    <h2>Search results</h2>
    <table class="table">
        <thead>
        <tr>
            <th>Results</th>
        </tr>
        </thead>

        <tbody>
        <tr >
            <td align="result" id="expirydata">John</td>
        </tr>

        </tbody>
    </table>
</div>

我只需要改变epirydata单元格。我需要给予行一个id吗?我还需要一个表Id吗?
Javascript不是我的菜,但我可以管理。任何Javascript解释都会起作用。谢谢。

holgip5t

holgip5t1#

const table = document.querySelector("table");
    table.rows[1].cells[0].textContent = "changed_text";
//First find table by tagname or class name.
//then travel into table by its rows and cells number
inb24sb2

inb24sb22#

免责声明:我从来没有与gopherjs。
HTML中的ID在网页中应该是唯一的。函数getElementById依赖于它。如果您需要以编程方式始终修改基于同一模板的同一单元格,该单元格出现在网页中的多个位置,以下是您的选项:
1.有参数化的/可配置的ID。将它传递到模板中,并相应地获取ElementById。优点:易于实现。2缺点:由于抽象漏洞和必须管理模板之外的所有ID而难以维护。
1.我有一个模板构建器方法,它将接受一个内容作为函数参数,并将输出已经替换了内容的模板。封装了实现细节。2缺点:使用较大的模板会降低性能,并且如果要填充多个占位符,可能必须引入参数缓存。
1.通过将ID放入模板中的顶层元素(例如table或div)来参数化模板。不要在嵌套元素中使用ID,而是使用class通过querySelector函数在ID元素中导航。这为您提供了灵活性、可维护性和可重用性。
我假设你使用.innerHTML = 'content'方法。小心XSS攻击。
1.现代的框架,如react或angular,都能处理/提供性能、优化和安全方面的功能。可能还有其他的框架/视图库,它们可能更精简和/或与gopherjs协同工作。试着去寻找这些。

相关问题