Question

我正在尝试创建一个程序，使用“添加行”按钮在HTML表格中使用Javascript动态添加行。似乎有错误。

<html>
<head>
    <title>Home - First Website</title>
    <style>
    table{
        width: 100%;
    }
    td{
        padding: 8px;
        border: 1px solid;
    }
    input[type="text"]{
        width: 100%;
    }
    </style>
    <script type="text/javascript">
    function add(){
        var num=parseInt(document.getElementById("t1").length+1);
        var a=document.createElement("td");
        var anode=document.createTextNode(num);
        a.appendChild(anode);
        document.getElementById("t1").appendChild(a);

        a=document.createElement("td");
        anode=document.createElement("input");
        var b=document.createAttribute("type");
        b.value="checkbox";
        anode.setAttributeNode(b);
        a.appendChild(anode);
        document.getElementById("t1").appendChild(a);

        a=document.createElement("td");
        anode=document.createElement("input");
        b=document.createAttribute("type");
        b.value="text";
        anode.setAttributeNode(b);
        a.appendChild(anode);
        document.getElementById("t1").appendChild(a);
    }
    </script>
</head>
<body>
    <table name="t1">
        <tr>
            <input type="button" value="Add Row" onclick="add()">
        </tr>
        <tr>
            <td>1.</td><td><input type="checkbox"></td><td><input type="text" style="width:100%;"></td>
        </tr>
    </table>
</body>
</html>

Answer 1

代码中存在多个问题：

1）添加行为什么要这样做：

var num=parseInt(document.getElementById("t1").length+1);

：请注意你没有给你的桌子任何身份证明。

我认为您需要计算您的行数。你可以通过以下方式获得：

var num =document.getElementById("t1").rows.length;

2）要添加行，您尚未创建<tr>元素！

这是纠正过的jsFiddle：的 http://jsfiddle.net/thecbuilder/kCm2D/1/

更新：改变了获取行数的方式。

<强> JS

function add() { var num = var num =document.getElementById("t1").rows.length; console.log(num); var x = document.createElement("tr"); var a = document.createElement("td"); var anode = document.createTextNode(num); a.appendChild(anode); x.appendChild(a); a = document.createElement("td"); anode = document.createElement("input"); var b = document.createAttribute("type"); b.value = "checkbox"; anode.setAttributeNode(b); a.appendChild(anode); x.appendChild(a); a = document.createElement("td"); anode = document.createElement("input"); b = document.createAttribute("type"); b.value = "text"; anode.setAttributeNode(b); a.appendChild(anode); x.appendChild(a); document.getElementById("t1").appendChild(x); }

<强> HTML

<table id="t1" name="t1">  <tr> <input type="button" value="Add Row" onclick="add()" /> </tr> <tr> <td>1.</td> <td> <input type="checkbox" /> </td> <td> <input type="text" style="width:100%;" /> </td> </tr> </table>

Answer 2

您正在使用getElementById，但您的表名称不是ID。

 <table name="t1">

到

<table id="t1">

Answer 3

错误发生在document.getElementById（＆＃34; t1＆＃34;）上，但您的表格没有id =＆＃34; t1＆＃34;，它的名称=＆＃34 ; TI＆＃34 ;. 更新到：

<table id="t1">

使用Javascript错误添加行

3 个答案: