js添加一行、删除一行
let str="<tr>"
+"<td>"+a[1]+"</td>"
+"<td>"+p_money+"</td>"
+"<td>"+b_money+"</td>"
+"<td ><span onclick="delTab('"+a[0]+"',this)" style="color: blue;cursor:pointer;">删除</span></td>"
+"</tr>";
$("#tab").append(str);
function delTab(id,obj){ ids=ids.replace(id+"#", ""); var tr=obj.parentNode.parentNode; var tbody=tr.parentNode; tbody.removeChild(tr); }
js获取多少行 多少列 以及获取数据
//获取表格对象; let tab = document.getElementById("tab"); //获取表格所有行数; let tablRows = tab.rows.length; let args=""; for(let i=1;i<tablRows;i++){ for(let j=1;j<tab.rows[i].cells.length-1;j++){ args+=tab.rows[i].cells[j].innerText+"#"; } args+=","; }
根据单元格获取行号
console.log(obj.parentNode.parentNode.rowIndex);
添加 、删除、上移、下移 案例代码
function add(){ let pjc=$("#pjc").val(); $("#pjc").val(""); //获取表格对象; let tab = document.getElementById("mytab"); //获取表格所有行数; let tablRows = tab.rows.length; if(tablRows>=11){ alert("最多只能添加10条"); return; } if(pjc){ if(tablRows==1){ let str="<tr>" +"<td>"+pjc+"</td>" +"<td ><span onclick="delTab(this)" style="color: blue;cursor:pointer;">删除</span></td>" +"</tr>"; $("#mytab").append(str); }else if (tablRows==2) { tab.rows[1].cells[1].innerHTML="<span onclick="delTab(this)" style="color: blue;cursor:pointer;">删除</span>" +"<span onclick="toBut(this)" style="color: blue;cursor:pointer;margin-left: 10px;">下移</span>"; let str="<tr>" +"<td>"+pjc+"</td>" +"<td ><span onclick="delTab(this)" style="color: blue;cursor:pointer;">删除</span>" +"<span onclick="toTop(this)" style="color: blue;cursor:pointer;margin-left: 10px;">上移</span>" +"</td>" +"</tr>"; $("#mytab").append(str); }else { let a= tab.rows[tablRows-1].cells.length-1; tab.rows[tablRows-1].cells[a].innerHTML="<span onclick="delTab(this)" style="color: blue;cursor:pointer;">删除</span>" +"<span onclick="toTop(this)" style="color: blue;cursor:pointer;margin-left: 10px;">上移</span>" +"<span onclick="toBut(this)" style="color: blue;cursor:pointer;margin-left: 10px;">下移</span>"; let str="<tr>" +"<td>"+pjc+"</td>" +"<td ><span onclick="delTab(this)" Opstyle="color: blue;cursor:pointer;">删除</span>" +"<span onclick="toTop(this)" style="color: blue;cursor:pointer;margin-left: 10px;">上移</span>" +"</td>" +"</tr>"; $("#mytab").append(str); } } } function toTop(obj) { //获取表格对象; let tab = document.getElementById("mytab"); let rows= obj.parentNode.parentNode.rowIndex; let rows2=rows-1; let html1=tab.rows[rows].cells[0].innerHTML; let html2=tab.rows[rows2].cells[0].innerHTML; tab.rows[rows].cells[0].innerHTML=html2; tab.rows[rows2].cells[0].innerHTML=html1; } function toBut(obj) { //获取表格对象; let tab = document.getElementById("mytab"); let rows= obj.parentNode.parentNode.rowIndex; let rows2=rows+1; let html1=tab.rows[rows].cells[0].innerHTML; let html2=tab.rows[rows2].cells[0].innerHTML; tab.rows[rows].cells[0].innerHTML=html2; tab.rows[rows2].cells[0].innerHTML=html1; } function delTab(obj){ //获取表格对象; let tab = document.getElementById("mytab"); //获取表格所有行数; let tablRows = tab.rows.length; var tr=obj.parentNode.parentNode; let rows= obj.parentNode.parentNode.rowIndex; var tbody=tr.parentNode; tbody.removeChild(tr); if(tablRows==3){ tab.rows[1].cells[1].innerHTML="<span onclick="delTab(this)" style="color: blue;cursor:pointer;">删除</span>"; }else if(tablRows==4){ if(rows+1==4){ tab.rows[2].cells[1].innerHTML="<span onclick="delTab(this)" style="color: blue;cursor:pointer;">删除</span>" +"<span onclick="toTop(this)" style="color: blue;cursor:pointer;margin-left: 10px;">上移</span>"; }else if(rows==1){ tab.rows[1].cells[1].innerHTML="<span onclick="delTab(this)" style="color: blue;cursor:pointer;">删除</span>" +"<span onclick="toBut(this)" style="color: blue;cursor:pointer;margin-left: 10px;">下移</span>"; } }else if(tablRows>=4){ if(rows+1==tabRows){ tab.rows[rows-1].cells[1].innerHTML="<span onclick="delTab(this)" style="color: blue;cursor:pointer;">删除</span>" +"<span onclick="toTop(this)" style="color: blue;cursor:pointer;margin-left: 10px;">上移</span>"; }else if(rows==1){ tab.rows[1].cells[1].innerHTML="<span onclick="delTab(this)" style="color: blue;cursor:pointer;">删除</span>" +"<span onclick="toBut(this)" style="color: blue;cursor:pointer;margin-left: 10px;">下移</span>"; } } }