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

代码如下:

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("无可删除的卡号信息!"); 
    } 
}

(0)

相关推荐

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

    复制代码 代码如下: 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");

  • JQuery实现表格动态增加行并对新行添加事件

    实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并绑定timepicker 三:表2自动增加行,新行绑定timepicker HTML源码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

  • pandas删除行删除列增加行增加列的实现

    创建df: >>> df = pd.DataFrame(np.arange(16).reshape(4, 4), columns=list('ABCD'), index=list('1234')) >>> df A B C D 1 0 1 2 3 2 4 5 6 7 3 8 9 10 11 4 12 13 14 15 1,删除行 1.1,drop 通过行名称删除: df = df.drop(['1', '2']) # 不指定axis默认为0 df.drop(['1',

  • 使用js完成节点的增删改复制等的操作

    需求:完成节点的增删改复制的操作 用到的方法和属性: 1.获取某个节点的父节点 parentNode属性 2.获取某个节点的子节点集合 childNodes属性 3.创键一个新的节点 createTextNode(节点文本内容) document对象的方法 在某些浏览器上兼容性不是很好 createElement(对象) document对象的方法 例如:document.createElement("a"); 4.给某个节点对象添加属性和属性值 setAttribute(属性,属性值

  • 使用jQuery给Table动态增加行、清空table的方法

    使用jQuery给Table动态增加行的代码如下所示: JS方法如下: $(document).ready(function(){ getFrjl(); $('#addFrjl').click(function(){ var trHTML = '<tr class = "frjlClass">'+ '<td>'+ '从<s:textfield onClick="WdatePicker();" cssStyle="width:1

  • JS表格组件BootstrapTable行内编辑解决方案x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件,遇到过一些坑,再此做个采坑记录吧!想要了解bootstrapTable的朋友可以移步JS组件系列--表格组件神器:bootstrap table. 一.x-editable组件介绍 x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap.Jquery U

  • C# datagridview、datagrid、GridControl增加行号代码解析

    目录 1.WinForm中datagridview增加行号 2.WPF中datagrid增加行号 3.WPF dev控件GridControl增加行号 1.WinForm中datagridview增加行号 在界面上拖一个控件dataGridView1,在datagridview添加行事件中添加如下代码: private void dataGridView1_RowsAdded(object sender, DataGridViewRowsAddedEventArgs e) { try { for

  • js对象的复制继承实例

    本文实例讲述了js对象的复制继承.分享给大家供大家参考.具体如下: 复制代码 代码如下: <script type="text/javascript"> Object.prototype.extend = function(obj){  //在函数里,把obj属性复制到自身  for(var k in obj){   if(obj.hasOwnProperty(k)){    if(this[k] == undefined){     this[k] = obj[k];  

  • js中如何复制一个对象并获取其所有属性和属性对应的值

    在js中如何复制一个对象,例如如下一个js对象. 如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢? 复制代码 代码如下: var obj={ colkey: "col", colsinfo: "NameList" } 最简单就是使用for in, 例如obj2就拥有了和obj完全相同的属性 复制代码 代码如下: var obj2=new Object(); for(var p in

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

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

随机推荐