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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
学习jQuey中的return false
Dec 18 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
写一个Vue Popup组件
Feb 25 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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
php 结果集的分页实现代码
2009/03/10 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP6新特性分析
2016/03/03 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
Python contextlib模块使用示例
2015/02/18 Python
Python map和reduce函数用法示例
2015/02/26 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python空元组在all中返回结果详解
2020/12/15 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
简历中自我评价分享
2013/10/09 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2015年试用期工作总结
2014/12/12 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
JS函数式编程实现XDM一
2022/06/16 Javascript