在表格中动态插入、删除行

最新推荐文章于 2020-07-16 11:05:23 发布

iteye_16133

最新推荐文章于 2020-07-16 11:05:23 发布

阅读量245

点赞数

文章标签： javascript ViewUI

在填写表单的时候，往往有某些表格项的记录的条数是不可预计的，需要动态插入表单，有两种方法可以解决，一种是通过控件的stype属性，即先将控件的代码敲上去，然后讲
style属性设置为“display:none”，在需要增加记录的时候，将style属性设置为"display:block"即可，这样做无法预计所需的新增记录行的条数，很大程度上造成代码的浪费，下面使用另外一种方法：
<script type="text/javascript">
//---------------动态在表格中插入行------------------------
function addMore(field){
var name=field.name;
var table=document.getElementById(name);
var len=table.rows[1].cells.length; //返回表格中的列数
var newTr=table.insertRow();
for(var i=0;i<len;i++){
var newTd=newTr.insertCell();
newTd.innerHTML=table.rows[1].cells[i].innerHTML;
}
}
//-----------------动态删除表格中指定的行---------------
function delRow(index,field){
var name=field.name;
if(index==-9999){
alert("没有选中需要删除的行！");
}else{
document.getElementById(name).deleteRow(index);
rowNumber=-9999;
}
}
//---------得到所在行的行标------------------------
function getRow(){
rowNumber=window.event.srcElement.parentElement.parentElement.rowIndex;
}

//-->
</script>
<form>
<body>
<center>个人专长</center>
<hr width="700"/>
<table width="930" border="1" align="center" id="skillTable">
<tr>
<th></th>
<th>专长类别</th>
<th>情况说明</th>
<th>
<a href="javascript:void()" name="skillTable" onClick="addMore(this)">更多</a>
</th>
</tr>
<tr>
<td>
<input type="checkbox" name="box" onClick="getRow()"/>
</td>
<td>
<input type="text" name="s_kind"/></td>
<td>
<input type="text" name="s_explain" size="60"/></td>
<td>
<a href="javascript:void()" onClick="delRow(rowNumber,this)" name="skillTable">删除</a>
</td>
</tr>
</table>

</body>
<form>
注意：只要将table的id属性，“删除”和“更多”两了超链接的name属性，这三个属性值设置一样就可以！