JS/jQuery实现超简单的Table表格添加,删除行功能示例

本文实例讲述了JS/jQuery实现超简单的Table表格添加,删除行功能。分享给大家供大家参考，具体如下：

最近需要表格添加删除行,添加行简单,删除行就有点儿懵逼了,于是网上找实例,功夫不负有心人,终于让我找到了,下面的是代码,大家觉得可以,记得点赞哦!!!谢谢!

需要的拿去,转载请在明显的位置标注出出处!!!

    



    

 
性别
 
姓名
 
年龄
    
    

 

     
男
女
     
 
 

     
 
 

     
 
    

//动态添加行
function addRow(){
  var table = document.getElementById("tableID");
  var newRow = table.insertRow(); //创建新行
  var newCell1 = newRow.insertCell(); //创建新单元格
  newCell.innerHTML = ""； //单元格内的内容
  newCell.setAttribute("align","center"); //设置位置
}
//动态删除行
function deleteRow(){
  var rowIndex = event.srcElement.parentElement.parentElement.rowIndex;
  var styles = document.getElementById("tableID");
  styles.deleteRow(rowIndex);
}

用克隆的方式

This is a paragraph.
复制每个 p 元素，然后追加到 body 元素

下面是直接添加和删除当前table表格,很好用

 
  
    
    
    
    
    
    
  
 
 
  添加
  显示
  
 

感兴趣的朋友可以使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript表格(table)操作技巧大全》、《Javascript操作DOM技巧总结》、《Javascript遍历算法与技巧总结》、《Javascript数学运算用法总结》、《Javascript数据结构与算法技巧总结》、《Javascript查找算法技巧总结》及《Javascript错误与调试技巧总结》

希望本文所述对大家Javascript程序设计有所帮助。