Question

我有这个代码并尝试创建一个表工作正常。但每次按下按钮，它都会在前一个下方添加相同的表格。我一开始就试过document.getElementById("target").innerHTML = "" 但它没有给我任何东西，因为没有桌子出现。我试过deleteRow循环，但没有反应。我也没有创建新表，但它继续添加新行而不是新表。找到了一些其他的解决方案，但不幸的是没有什代码在target元素中输出“[object HTMLTableElement]”并创建全新的表。

<script>
    function TableCreate() {

        var table = document.createElement('table');
        for (var i = 1; i < val.length; i++) {
            if (i % max === 1) {
                var tr = document.createElement('tr');
            }
            var td1 = document.createElement('td');
            var text1 = document.createTextNode(val[i]);
            td1.appendChild(text1);
            tr.appendChild(td1);
            if (i % 4 === 1) {
                table.appendChild(tr);
            }
        }
        document.getElementById("target").innerHTML = document.body.appendChild(table);
    }
</script>


<html>
<table id="target"></table> <!-- tried also with div -->
</html>

Answer 1

不确定原因，但效果很好。

<script>
    var table = document.createElement('table');
                for (var i = 1; i < val.length; i++) {
                    if (i % max === 1) {
                        var tr = document.createElement('tr');
                    }
                    var td1 = document.createElement('td');
                    var text1 = document.createTextNode(val[i]);
                    td1.appendChild(text1);
                    tr.appendChild(td1);
                    if (i % 4 === 1) {
                        table.appendChild(tr);
                    }
                }
                document.getElementById("tb").remove();
                table.id = "tb";
                document.getElementById("tb").children = document.body.appendChild(table);
  </script>

<html>
    <body>
        <table id="tb"></table>
    </body>    
</html>

清除生成的表js

1 个答案: