js操作表格、table、

 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>";
                }
            }

        }
原文地址:https://www.cnblogs.com/qq376324789/p/10928916.html