JS动态增删表格行的方法

本文实例讲述了JS动态增删表格行的方法。分享给大家供大家参考，具体如下：

function insertRow(tableName,className,bgcolor, cellContentArray){
 var t = document.getElementByIdx(tableName); //取得table表
 var tr = t.insertRow();  //插入一行
 tr.className=className;  //设置行的css
 tr.bgcolor=bgcolor;   //设置行的背景颜色
 for( var i=0;i<cellContentArray.length;i++){
 var td = tr.insertCell(); //插入一列
 td.innerHTML=cellContentArray[i]; //设置列内容
 }
}
function deleteRow(tableName,btn){
 var t = document.getElementByIdx(tableName); //取得table表
 var tr = btn.parentNode.parentNode; //取得对应的行
 t.deleteRow(tr.rowIndex);
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

赞 (0)

相关推荐

  • 纯原生js实现table表格的增删

    公司实习生问我table的增删操作,用jQuery很简单的实现了.又问我不使用jQuery,只使用js如何实现. 面对这种情况,我的一贯做法是'不理解,但是支持'. jQuery用的多了,人也懒了,但还是用js实现了这一操作,觉得难点在于IE兼容... 只是想找代码看看的可以跳过分析过程,文章底部附有完整代码. 以下是coding过程: HTML结构代码 一个基本的table结构,增加了一些简单的样式,三个按钮分别对应创建.清空,和一个预留. <!DOCTYPE HTML> <html&

  • javascript实现表格增删改操作实例详解

    本文实例讲述了javascript实现表格增删改操作的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • JS对HTML表格进行增删改操作

    要求如下: 写一个html页面,里面有一个表格,储存用户信息,包括:用户名,密码,姓名,邮箱,电话,qq,身份证号.  现在要通过js对表格进行动态的增删改查(只是内存操作即可): 首先,加载页面时用js加载3条初始化记录:  有一个增加记录的按钮,点击后弹出一个div层提供输入,要求各字段必须符合输入格式且不能为空:  用户名:英文+数字+下划线:  密码:英文+数字+下划线+6位以上:  姓名:中文:  邮箱,电话,qq,身份证号符合格式:  每条记录有修改.删除:  修改类似增加,要把原来

  • JS动态增删表格行的方法

    本文实例讲述了JS动态增删表格行的方法.分享给大家供大家参考,具体如下: function insertRow(tableName,className,bgcolor, cellContentArray){ var t = document.getElementByIdx(tableName); //取得table表 var tr = t.insertRow(); //插入一行 tr.className=className; //设置行的css tr.bgcolor=bgcolor; //设置行

  • js动态修改表格行colspan列跨度的方法

    本文实例讲述了js动态修改表格行colspan列跨度的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script> function setColSpan() { var x=document.getElementById('myTable').rows[0].cells; x[0].colSpan="2"; x[1].colSpan="6"; } </sc

  • JS实现从表格中动态删除指定行的方法

    本文实例讲述了JS实现从表格中动态删除指定行的方法.分享给大家供大家参考.具体如下: JS的表格对象有一个deleteRow方法用于删除表格中的指定行,只需要指定行号即可 <!DOCTYPE html> <html> <head> <script> function deleteRow(r) { var i=r.parentNode.parentNode.rowIndex; document.getElementById('myTable').deleteR

  • 原生JS和JQuery动态添加、删除表格行的方法

    本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

  • jQuery实现html表格动态添加新行的方法

    本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • JS实现向表格行添加新单元格的方法

    本文实例讲述了JS实现向表格行添加新单元格的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以想表格中指定id的行插入新的单元格 <!DOCTYPE html> <html> <head> <script> function insCell() { var x=document.getElementById('tr1').insertCell(0); x.innerHTML="The famous"; } </script&

  • JS动态改变表格边框宽度的方法

    本文实例讲述了JS动态改变表格边框宽度的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过表格对象的border属性修改表格边框宽度 <!DOCTYPE html> <html> <head> <script> function changeBorder() { document.getElementById('myTable').border="10"; } </script> </head> <b

  • JS实现控制表格行内容垂直对齐的方法

    本文实例讲述了JS实现控制表格行内容垂直对齐的方法.分享给大家供大家参考.具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶.可以居中.可以底部对齐 <!DOCTYPE html> <html> <head> <script> function topAlign() { document.getElementById('tr2').vAlign="top"; } </script> <

  • JS实现鼠标点击展开或隐藏表格行的方法

    本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • JQuery动态添加和删除表格行的方法

    本文实例讲述了JQuery动态添加和删除表格行的方法.分享给大家供大家参考.具体分析如下: 昨天做页面表格行动态添加和删除,看了无数的介绍,发现了一个好东东,JQuery.用它实现起来还真的是很方便,这个是我用到我们平台的一个方法. 复制代码 代码如下: //记录添加行数 var areaCount=1; //记录实际表格行数 var rowCount=1; //删除模板html var delRowTemplete = "<td><a href='javascript:voi

随机推荐