Javascript动态表不起作用

时间:2017-05-09 16:46:55

标签: javascript

我想在用户点击"添加"按钮,但它不起作用,我不知道为什么。



function Add() {
     var table1 = document.getElementById("insertTable");
     var tr = document.createElement("tr");
     tr.setAttribute("bgColor", "#FFFFCC");
     tr.setAttribute("height", "30");

    var td1 = document.createElement("td");
    td1.setAttribute("width", "100");
    td1.innerText = document.all.txtHome.value;
    var td2 = document.createElement("td");
    td2.setAttribute("width", "200");
    td2.innerText = document.all.txtAway.value;

    tr.appendChild(td1);
    tr.appendChild(td2);

    if (table1.firstChild.lastChild.childNodes.length == 1)
        table1.firstChild.removeChild(table1.firstChild.lastChild);
    //delete "No Text" row

    table1.firstChild.appendChild(tr);
}

<table border="1" width="300" id="insertTable">
<tr>
    <th width="100">City:</th>
    <th width="200">Country</th>
</tr>
<tr>
    <td align="center" colspan="2">No Text</td>
</tr>
</table>
<br/>
City:<input type="text" size="10" name="txtHome" />
Country:<input type="text" size="10" name="txtAway" />
<button onclick="Add();">Add</button>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

可能不是最优雅的解决方案,但这可行。

即使未明确定义,也不要忘记表始终具有<tbody>。 鉴于<tr>元素都是tbody的子元素,最好明确定义它并为其赋予“insertTable”id。

然后你可以直接附加到那个没有混淆的firstChild / lastChild东西。

此外,为“无文本”占位符行指定一个ID,以便更容易删除。

function Add() {
    var table1 = document.getElementById("insertTable");
    if(table1) {
        var tr = document.createElement("tr");
        tr.setAttribute("bgColor", "#FFFFCC");
        tr.setAttribute("height", "30");

        var td1 = document.createElement("td");
        td1.setAttribute("width", "100");
        td1.innerText = document.all.txtHome.value;
        var td2 = document.createElement("td");
        td2.setAttribute("width", "200");
        td2.innerText = document.all.txtAway.value;

        tr.appendChild(td1);
        tr.appendChild(td2);

        //delete "No Text" row
        var noText = document.getElementById("noText");
        if(noText) table1.removeChild(noText);

        table1.appendChild(tr);
    }
}
<table border="1" width="300">
    <tbody id="insertTable">
        <tr>
            <th width="100">City:</th>
            <th width="200">Country</th>
        </tr>
        <tr id="noText">
            <td align="center" colspan="2">No Text</td>
        </tr>
    </tbody>
</table>
<br/>
City:<input type="text" size="10" name="txtHome" />
Country:<input type="text" size="10" name="txtAway" />
<button onclick="Add();">Add</button>