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

前端  /  管理员 发布于 4年前   485

本文实例讲述了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..net.cn/code/HtmlJsRun测试上述代码运行效果。

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

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

您可能感兴趣的文章:

• javascript实现table表格隔行变色的方法
• JavaScript获取表格（table）当前行的值、删除行、增加行
• JavaScript遍历table表格中的某行某列并打印其值
• 键盘上下键移动选择table表格行的js代码
• js操作table元素实现表格行列新增、删除技巧总结
• JS实现table表格内针对某列内容进行即时搜索筛选功能
• js处理表格对table进行修饰
• jQuery 选择表格(table)里的行和列及改变简单样式
• jQuery对table表格进行增删改查
• 基于JQuery的动态删除Table表格的行和列的代码
• jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
• jQuery+CSS实现的table表格行列转置功能示例