表格动态添加删除

jsp页面中的部分代码:

<form. action="#",id="my_form">
<tbody id="my_tbody">
<table id="my_table" width="600px">
<tr>
<th>姓名</th>
<th>电话</th>
<th>地址</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="text" name="name"/></td>
<td><input type="text" name="telephone"/></td>
<td><input type="text" name="address"/></td>
<td><input type="text" name="age"/></td>
<td><input type="button" value="添加" nclick="addRow('my_table');"/></td>
</tr>
</table>
</tbody>
</form>
js文件:

var count=0;
function addRow(tableId){
//得到一个表格对象
var table = document.getElementById(tableId);
var form. = document.forms[0];
var row =document.createElement("tr");
//新建一行
row.setAttribute("id",count++);
var values = getFormValues(form);
for(index=0;index< values.length;index++){
var td = document.createElement("td");
//创建新列
var txt = document.createTextNode(values[index]);
td.appendChild(txt);
row.appendChild(td);
}
var my_button = document.createElement("input");
my_button.setAttribute("type","button");
my_button.setAttribute("name","button");
my_button.setAttribute("value","删除");
my_button.onclick=function(){
deleteItem(row);
}
td = document.createElement("td");
td.appendChild(my_button);
row.appendChild(td);
var beforeNode = table.childNodes[2];
table.insertBefore(row,beforeNode);
}

function deleteItem(obj)
{
var rows = document.getElementsByTagName("tr");
var id = obj.getAttribute("id");
var len = rows.length;
for(var i=0;i<len;i++){
if(rows[i].id!="" && rows[i].id==id){
var bjPparent = obj.parentNode ;
//得到要删除结点的父结点
objPparent.removeChild(obj);
break;
}
}
}

function getFormValues(form){
var my_array = new Array();
var arrayLength = form.elements.length;
for(var i=0;i<arrayLength;i++){
if(form.elements[i].getAttribute("type")!="button"){
my_array[i] = form.elements[i].value;
}
}
return my_array;
}