JS增加行复制行删除行的实现代码


Posted in Javascript onNovember 09, 2013
var customerInfoMethod ={  
//复制增加行  
copyrow:function(obj,id)  
{  
var rowIndex=obj.parentNode.parentNode.rowIndex;  
var resrow=document.getElementById(id);  
rowIndex--;  
var newRow=resrow.cloneNode(true);//document.createElement("tr");  
var parent = resrow.parentNode;  
   if(parent.lastChild == resrow){  
   //如果targetElement是parent最后一个子元素,插入newElement  
   parent.appendChild(newRow);  
  }else{  
  //如果不是,插入到targetElement下一个兄弟节点的前面  
   parent.insertBefore(newRow, resrow.nextSibling);  
  }  //newRow.innerHTML=resrow.innerHTML;  
var selectObj = newRow.getElementsByTagName("select");  
for(var a=0;a<selectObj.length;a++){  
selectObj[a].options[0].selected=true;  
}  
var inputObj = newRow.getElementsByTagName("input");  
inputObj[0].style.display="";  
inputObj[1].style.display="none";  
},  
//复制增加行  
copyrowUpdate:function(obj,id)  
{  
var rowIndex=obj.parentNode.parentNode.rowIndex;   
var resrow=document.getElementById(id);  
rowIndex--;  
var newRow=resrow.cloneNode(true);//document.createElement("tr");  
var parent = resrow.parentNode;  
   if(parent.lastChild == resrow){  
   //如果targetElement是parent最后一个子元素,插入newElement  
   parent.appendChild(newRow);  
  }else{  
  //如果不是,插入到targetElement下一个兄弟节点的前面  
   parent.insertBefore(newRow, resrow.nextSibling);  
  }  
//newRow.innerHTML=resrow.innerHTML;  
var selectObj = newRow.getElementsByTagName("select");  
for(var a=0;a<selectObj.length;a++){  
selectObj[a].options[0].selected=true;  
}  
var inputObj = newRow.getElementsByTagName("input");  
for(var i=0;i<inputObj.length-2;i++){  
inputObj[i].value="0";  
}  
inputObj[inputObj.length-2].style.display="";  
inputObj[inputObj.length-1].style.display="none";  
},  
//删除行  
deleteRow:function(rootId,obj) {  
var rootTable = $(rootId);  
rootTable.deleteRow(obj.parentNode.parentNode.rowIndex);  
  }  
}  

/**  
 增加行 fanjf  
*/  
function addRow(tableId,trId){  
var tableObj = document.getElementById(tableId);  
var trObj = document.getElementById(trId);  
//var trIndex = trObj.rowIndex+1;  
var rows = tableObj.rows.length;  
var cell = "";  
var tr = tableObj.insertRow(rows);  
for(i=0;i<trObj.cells.length;i++){  
 cell= tableObj.rows(rows).insertCell(i);  
 cell.innerText= trObj.cells(i).innerText;  
 cell.className= trObj.cells(i).className;  
 cell.innerHTML= trObj.cells(i).innerHTML;  
}  
}  
/**  
 删除行 fanjf  
*/  
function deleteRow(tableId,trId){  
    var tableObj = document.getElementById(tableId);  
    var trObj = document.getElementById(trId);  
    //var trIndex = trObj.rowIndex;//复制tr的行号  
    var rows = tableObj.rows.length;  
    if(rows>0){  
    tableObj.deleteRow(rows-1);  
    }else{  
        alert("无可删除的卡号信息!");  
    }  
} 
Javascript 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
javascript 表单验证常见正则
Sep 28 Javascript
js获取当前月的第一天和最后一天的小例子
Nov 18 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 #Javascript
js实现简单登录功能的实例代码
Nov 09 #Javascript
ExtJS实现文件下载的方法实例
Nov 09 #Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 #Javascript
5分钟理解JavaScript中this用法分享
Nov 09 #Javascript
Mac地址验证的javascript代码
Nov 09 #Javascript
详解jquery uploadify 上传文件
Nov 09 #Javascript
You might like
加速XP搜索功能堪比vista
2007/03/22 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
深入php list()函数的详解
2013/06/05 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
jquery基础教程之数组使用详解
2014/03/10 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python获得一个月有多少天的方法
2015/06/04 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python 编写简单网页服务器的实例
2018/06/01 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python实现在线翻译功能
2020/03/03 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
大雁塔导游词
2015/02/04 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js