JS更改内部html表格单元格

Posted 2023-05-07

【中文标题】JS更改内部html表格单元格

【英文标题】：JS to change inner html table cell

【发布时间】：2015-12-05 19:03:48

【问题描述】：

我是自学 php，几乎没有 js 经验，所以这可能非常简单，但我制作了一个 js 函数来更改表格单元格的内部 html，并在要调用的 select 元素上添加了一个 onchange 事件侦听器功能。但是，当我更改所选值时没有任何反应，而且我不知道为什么，考虑到它应该如此简单。请帮忙。

我想更改的td：

        echo '<tr><td id="pastEvents">';
        for($i=0;$i<=3;$i++)
            echo '<table class="invisible"><tr><td><img src="/'.$pastEvents[$i]['banner'].'" ></td></tr><tr><td>'.$pastEvents[$i]['name'].'</td></tr></table>';
        
        echo '</td></tr>';

事件监听器：

echo '<tr><td><table class="invisible"><tr><td>Number Shown: <select name="select" onchange="changePast()"><option value="3">3</option><option value="10">10</option><option value="20">20</option><option value="all">All</option></select></td></tr></table></td></tr>';

脚本：

<script>
    function changePast()
        var shown = document.getElementsByName("select");
        document.getElementById("pastEvents").innerhtml = "test";
    
</script>

【问题讨论】：

尝试使用 innerHTML 而不是 innerhtml

是的，shown 是 NodeList（不是前面所述的 HTMLCollection，抱歉）。你需要一个特定的元素。然后，假设您要添加该 select 元素的 value，您需要获取它的 value。否则你会得到"[object NodeList]" 或"[object HTMLSelectElement]"。

您的浏览器控制台中是否显示任何错误？您可以尝试在函数开头添加console.log('test'); 以查看是否发生了任何事情吗？

@Xufox 它在浏览器中显示：未捕获的类型错误：无法将属性“innerHTML”设置为 null。我一无所知

哦，这意味着找不到该元素。这很奇怪，因为您确实在使用 PHP 来回显它，并且只有在您更改 select 下拉列表时才能访问该元素，因为 changePast 函数仅在 onchange 内联处理程序中执行。 <td id="pastEvents"> 真的存在于您的文档中吗？

【参考方案1】：

其实是innerHTML

<div id="A"></div>

document.getElementById("A").innerHTML = 'text'

【讨论】：

它仍然不起作用，不知道为什么但是当我更改选择框值时没有任何反应

【参考方案2】：

正确的使用方式是.innerHtml()而不是.innerhtml()

<script>
    function changePast()
        var shown = document.getElementsByName("select");
        document.getElementById("pastEvents").innerHtml = "test";
    
</script>