表格动态添加删除

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;

}