Question

用javascript实现在表格中添加新行的同时添加内容。需要怎么改。

<table id="mytable" width="80%" align="center" cellpadding="5" cellspacing="5" class="" bgcolor="#00CCFF" onclick="changeTableBg(this.table)">
<tr>
<td align="center" class="td2" width="10%">姓名</td>
<td align="center" class="td2" width="5%">性别</td>
<td align="center" class="td2" width="25%">联系方式</td>
<td align="center" class="td2" width="40%">工作地点</td>
</tr>
<tr>
<td>赵钱孙李</td>
<td>不男不女</td>
<td>写信快递</td>
<td>马勒戈壁</td>
</tr>
</table>
姓名<input type="text" name="xm" />
性别<input type="text" name="sex" />
联系方式<input type="text" name="call" />
工作地点<input type="text" name="add" /><br />
<input type=button value=确定添加 onclick="tableAddRow(mytable);" />

Answer 1

以下仅供参考，具体要什么自己弄，主要是创建tr：document.createElement('tr);和加上tr：tableObj.appnedChild(tr元素);

function tableAddRow(mytable)
{
var table = document.getElementById(mytable);

var tr = document.createElement('tr');
tr.width='100px';
tr.height='30px';

var button=document.createElement("input");
button.type="button";
button.id="bt1";
button.value="点击我,在我之前插入文本框";
tr.appendChild(button);
button.onclick=function(){
var input=document.createElement("input");
input.type="text";
this.parentNode.insertBefore(input,this);
}

//alert(table);
table.appendChild(tr);
}

另外<input type=button value=确定添加 onclick="tableAddRow(mytable);" />这句里面的mytable参数需要用单引号括起来

Answer 2

<script type="text/javascript">
function tableAddRow(obj)
{
var newTr = document.getElementById(obj).insertRow(); //插入新行
var newTd0 = newTr.insertCell(); //为行插入单元格
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
newTd0.innerHTML=document.getElementById("xm").value;//为单元格加入内容
newTd1.innerHTML=document.getElementById("sex").value;
newTd2.innerHTML=document.getElementById("call").value;
newTd3.innerHTML=document.getElementById("add").value;

}
</script>
<table id="mytable" width="80%" align="center" cellpadding="5" cellspacing="5" class="" bgcolor="#00CCFF">
<tr>
<td align="center" class="td2" width="10%">姓名</td>
<td align="center" class="td2" width="5%">性别</td>
<td align="center" class="td2" width="25%">联系方式</td>
<td align="center" class="td2" width="40%">工作地点</td>
</tr>
<tr>
<td>赵钱孙李</td>
<td>不男不女</td>
<td>写信快递</td>
<td>马勒戈壁</td>
</tr>
</table>
姓名<input type="text" name="xm" id="xm" />
性别<input type="text" name="sex" id="sex"/>
联系方式<input type="text" name="call" id="call"/>
工作地点<input type="text" name="add" id="add"/><br />
<input type=button value=确定添加 onclick="tableAddRow('mytable');" />