我想在用户点击"添加"按钮,但它不起作用,我不知道为什么。
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;
答案 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>