用javascript实现在表格中添加新行的同时添加内容。需要怎么改。
<tableid="mytable"width="80%"align="center"cellpadding="5"cellspacing="5"class=""bgco...
<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);" /> 展开
<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);" /> 展开
2个回答
展开全部
以下仅供参考,具体要什么自己弄,主要是创建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参数需要用单引号括起来
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参数需要用单引号括起来
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<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');" />
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');" />
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询