zoukankan      html  css  js  c++  java
  • 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>";
                    }
                }
    
            }
  • 相关阅读:
    JAVA基础
    常用的快捷键
    [19]Docker01 docker学习环境 虚拟机 Centos 安装
    [18] Python控制台版-体温管理项目
    [17] MySQL数据库--学生管理系统数据库手写SQL实现
    [16] Python控制台版-学生管理系统
    [15]Python内置对象汇总
    [2] 使用PicGo + 码云搭建属于自己的图床
    [1] Django 分页
    [gitgnore]
  • 原文地址:https://www.cnblogs.com/qq376324789/p/10928916.html
Copyright © 2011-2022 走看看