js动态添加、删除表格，兼容IE、FireFox、Chrome

thancool

于 2010-03-31 20:25:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： firefox ie input table class function

本文链接：https://blog.youkuaiyun.com/thancool/article/details/5438722

本文介绍了一段JavaScript代码，该代码实现了网页上表格的行添加和删除功能。通过获取表格元素，可以动态地向表格中插入新行并填充特定内容，并提供删除按钮以移除指定行。适用于需要灵活管理表格数据的前端应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function addTable(){
var table=document.getElementById("specialtyTable");
if(table){

    var newRow =table.insertRow(table.rows.length);
    var cell =newRow.insertCell(0);
    cell.innerHTML='专业代码*';
    cell=newRow.insertCell(1);
    cell.innerHTML=' <input name="spno" type="text" class="input" style="width:99% ">';
    cell=newRow.insertCell(2);
    cell.innerHTML='专业名称*';
    cell=newRow.insertCell(3);
    cell.innerHTML='<input name="spno" type="text" class="input" style="width:99% ">';
    cell=newRow.insertCell(4);
    cell.innerHTML='<input name="Submit" type="button" class="buttonface02" value=" 删除   " onclick="removeCurrentRow(this);">';
   }
  }

  function removeCurrentRow(event_ff){

   var table =document.getElementById("mytable");
   var obj = (document.all)?event.srcElement:event_ff; //支持document.all的是IE
   if(table ){
    var index= obj.parentNode.parentNode.rowIndex;
    //             事件源"删除"    <td>       <tr>

    table.deleteRow(index);
   }
  }