js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现

/** * 删除 */ function ref(){ window.location.reload(); } /** * 全选 */ function alls(){ var s=document.getElementsByName("ck"); for(var i=0;i<s.length;i++){ s[i].checked=true; } } /** * 全不选 */ function allnots(){ var s=document.getElementsByName("ck"); for(var i=0;i<s.length;i++){ s[i].checked=false; } } /** * 添加方法1。标准添加方法，数据量大时省运存 */ function add(){ //生成行对象 var tr=document.createElement("tr"); //生成单元格对象1 var td1=document.createElement("td"); //生成input对象 var ck=document.createElement("input"); //设置input对象属性，设置tepy=“checkbox”，name=“ck” ck.setAttribute("type","checkbox"); ck.setAttribute("name","ck"); //单元格1添加input对象 td1.appendChild(ck); //行添加单元格对象1 tr.appendChild(td1); //生成单元格对象2 var td2=document.createElement("td"); //行添加单元格对象2 tr.appendChild(td2); //生成单元格对象3 var td3=document.createElement("td"); //行添加单元格对象3 tr.appendChild(td3); //生成单元格对象4 var td4=document.createElement("td"); //行添加单元格对象4 tr.appendChild(td4); //获取id为t2的表格对象 var table=document.getElementById("t2"); //t2表格添加行对象 table.appendChild(tr); } /** * 添加方法2，数据量大时，网站会卡 */ function add2(){ var table=document.getElementById("t2"); var s='<tr><td><input type="checkbox" id="tr1" name="ck"/></td><td></td><td></td><td></td></tr>'; table.innerHTML+=s; } /** * 拷贝 */ function copy(){ //获取id为t2的表格对象 var table=document.getElementById("t2"); //获取name为ck的复选框集合 var ck=document.getElementsByName("ck"); //创建一个临时存取的集合 var temp=new Array(); //遍历复选框name为ck集合 for(var i=0;i<ck.length;i++){ //判断复选框是否选中 if(ck[i].checked){ //使选中状态的复选框变为未选中状态 ck[i].checked=false; //获取tr(行)节点。ck[i](复选框的)的父节点是单元格，单元格的父节点是行。 var tr=ck[i].parentNode.parentNode; //copyty存储行对象的克隆对象。设置true为深度克隆(会克隆内容)。设置false则只克隆空白无内容的行 var copytr=tr.cloneNode(true); //临时存取集合temp存储克隆后的行对象元素 temp.push(copytr); } } //遍历存取集合temp for(var i=0;i<temp.length;i++){ //id为t2的表格添加行对象 table.appendChild(temp[i]); } } /** * 上移 */ function moveUp(){ //获取id为t2的表格对象 var table=document.getElementById("t2"); //获取name为ck的复选框集合 var ck=document.getElementsByName("ck"); //创建一个临时存取的集合 var temp=new Array(); //遍历复选框name为ck集合 for(var i=0;i<ck.length;i++){ //判断复选框是否选中 if(ck[i].checked){ //获取tr(行)节点。ck[i](复选框的)的父节点是单元格，单元格的父节点是行。 var tr=ck[i].parentNode.parentNode; // alert(tr); //临时存取集合temp存储行对象元素 temp.push(tr); } } //获得当前所有行对象 var rows=table.rows; //遍历存取集合temp for(var i=0;i<temp.length;i++){ //获得当前选取行对象 var _now=temp[i]; //遍历所有行对象 for(var j=0;j<rows.length;j++){ //判定该行对象是否是当前选中的行 if(rows[j]==_now){ //获得上一行的下标 var p_index=j-1; //判定是否是最上行 if(p_index<0){ //如果是最上行，该方法结束 return; } //获得上一行对象 var p=rows[p_index]; //移除当前行，_now.parentNode等于table(该处不能用table，只能如此)。 _now.parentNode.removeChild(_now); //在上一行节点前添加新节点(添加选中节点),insertBefore(新,旧)。 p.parentNode.insertBefore(_now,p); break; } } } } /** * 下移 */ function moveDown(){ //获取id为t2的表格对象 var table=document.getElementById("t2"); //获取name为ck的复选框集合 var ck=document.getElementsByName("ck"); //创建一个临时存取的集合 var temp=new Array(); //遍历复选框name为ck集合 for(var i=0;i<ck.length;i++){ //判断复选框是否选中 if(ck[i].checked){ //获取tr(行)节点。ck[i](复选框的)的父节点是单元格，单元格的父节点是行。 var tr=ck[i].parentNode.parentNode; // alert(tr); //临时存取集合temp存储行对象元素 temp.push(tr); } } //获得当前所有行对象 var rows=table.rows; //遍历存取集合temp*****从下往上遍历******** for(var i=temp.length-1;i>=0;i--){ //获得当前选取行对象(选中的最下面一行的对象)***** var _now=temp[i]; //遍历所有行对象 for(var j=0;j<rows.length;j++){ //判定该行对象是否是当前选中的行 if(rows[j]==_now){ //获得下一行的下标***** var p_index=j+1; //判定是否是最下行******** if(p_index>=rows.length){ //如果是最下行，该方法结束****** return; } //获得下一行对象 var p=rows[p_index]; //移除下一行，_now.parentNode等于table(该处不能用table，只能如此)。****** p.parentNode.removeChild(p); //在选中行节点前添加新节点(添加选中节点)插入选中的下一行的对象,insertBefore(新,旧)。******** _now.parentNode.insertBefore(p,_now); break; } } } } /** * 删除方法1 */ function del(){ //获取id为t2的表格对象 var table=document.getElementById("t2"); //获取name为ck的复选框集合 var ck=document.getElementsByName("ck"); //遍历复选框name为ck集合 for(var i=0;i<ck.length;i++){ //判断复选框是否选中 if(ck[i].checked){ //表格删除行(被选中的第i行) table.deleteRow(i); i=-1 } } } /** * 删除方法2 */ function del2(){ //获取id为t2的表格对象 var table=document.getElementById("t2"); //获取name为ck的复选框集合 var ck=document.getElementsByName("ck"); //创建一个临时存取的集合 var temp=new Array(); //遍历复选框name为ck集合 for(var i=0;i<ck.length;i++){ //判断复选框是否选中 if(ck[i].checked){ //获取tr(行)节点。ck[i](复选框的)的父节点是单元格，单元格的父节点是行。 var tr=ck[i].parentNode.parentNode; // alert(tr); //临时存取集合temp存储行对象元素 temp.push(tr); } } //遍历存取集合temp for(var i=0;i<temp.length;i++){ //id为t2的表格删除行对象 // table.removeChild(temp[i]);//删除不了原本的，只能删除新增的（是个bug） //必须要取删除行的父对象，再用该行的父对象去删除该行（直接用table实现不了） temp[i].parentNode.removeChild(temp[i]); } }