可编辑表格

最新推荐文章于 2024-10-02 05:39:15 发布

pqxpq

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量112

点赞数

分类专栏：杂记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_52563729/article/details/130084430

版权

杂记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css

<!DOCTYPE html>
<html>
<head>
  <title>可编辑表格</title>
  <style lang="less">
     .iin{
        display: none;
     }
  </style>
</head>
<body>
  <button class="tj">添加</button> 
  <div class="iin">
    姓名<input type="text" name="name" id="" class="one">
    工资<input type="text" name="money" id="" class="two">
    <button class="ok">ok</button>
  </div>
    <table border="1px" id="ta">
      <tr style="text-align: center;font-weight: bold;">
        <th>姓名</th>
        <th>工资</th>
        <th>功能1</th>
        <th>功能2</th>
      </tr>
      <tr id>
        <td >李二</td>
        <td id="d1">66</td>
        <th><button class="sc" onclick="delRow(this)">删除</button></th>
        <th><button class="sc" onclick="updataRow(this)">修改</button></th>
      </tr>
      <tr>
        <td >李三</td>
        <td >77</td>
        <th><button class="sc" onclick="delRow(this)">删除</button></th>
        <th><button class="sc" onclick="updataRow(this)">修改</button></th>
      </tr>
      <tr>
        <td >李四</td>
        <td >88</td>
        <th><button class="sc" onclick="delRow(this)">删除</button></th>
        <th><button class="sc"onclick="updataRow(this)">修改</button></th>
      </tr>
    </table>
  <script>
    let t
     function updataRow(e){
       
     
      //判断输入的是不是数字
      // var t=document.getElementById('d1');
      let fa= e.parentNode.parentNode;
      //console.log(fa)
      let my=fa.childNodes;
     // console.log(my);
     // console.log(my[3])
       t = my[3];
      if(!isNaN(Number(t.innerHTML))){
        t.innerHTML="<input type='text' value='"+t.innerHTML+"' οnblur='updataRow2(this)'/>"
    }
  }
  function updataRow2(inp){
   // console.log("----------")
   // console.log(inp)

     // var t=document.getElementById("d1");
      t.innerHTML=inp.value;
    }
    function delRow(btn){
      //获敲table对象
      var ta=document.getElementById("ta");
      //装权更形球的行对象
      var tr=btn.parentNode.parentNode;
      //意除行
      ta.deleteRow(tr.rowIndex);
} const iin= document.querySelector(".iin")
     const tj = document.querySelector(".tj")
     tj.addEventListener("click",function(){
        const ta=document.querySelector("#ta");
        iin.style.display='block';
     })
     const ok=document.querySelector(".ok");
        ok.addEventListener("click",function(){
            const input1 = document.querySelector(".one");
            const input2 = document.querySelector(".two");
            const value1=input1.value;
            const value2=input2.value;
            const tr=document.createElement("tr");
             ta.appendChild(tr)
        tr.innerHTML=` <td >${value1}</td>
        <td id="d1">${value2}</td>
        <th><button class="sc" onclick="delRow(this)">删除</button></th>
        <th><button class="sc" onclick="updataRow(this)">修改</button></th>`
         iin.style.display='none';
        })
  </script>
</body>
</html>

修改功能

function updataRow(e){
       
     
      //判断输入的是不是数字
      // var t=document.getElementById('d1');
      let fa= e.parentNode.parentNode;
      //console.log(fa)
      let my=fa.childNodes;
     // console.log(my);
     // console.log(my[3])
       t = my[3];
      if(!isNaN(Number(t.innerHTML))){
        t.innerHTML="<input type='text' value='"+t.innerHTML+"' οnblur='updataRow2(this)'/>"
    }
  }
  function updataRow2(inp){
   // console.log("----------")
   // console.log(inp)

     // var t=document.getElementById("d1");
      t.innerHTML=inp.value;
    }

删除功能

 function delRow(btn) {
            //获敲table对象
            var ta = document.getElementById("ta");
            //装权更形球的行对象
            var tr = btn.parentNode.parentNode;
            //意除行
            ta.deleteRow(tr.rowIndex);
        }

添加功能

const iin = document.querySelector(".iin")
        const tj = document.querySelector(".tj")
        tj.addEventListener("click", function () {
            const ta = document.querySelector("#ta");
            iin.style.display = 'block';
        })
        const ok = document.querySelector(".ok");
        ok.addEventListener("click", function () {
            const input1 = document.querySelector(".one");
            const input2 = document.querySelector(".two");
            const value1 = input1.value;
            const value2 = input2.value;
            const tr = document.createElement("tr");
            ta.appendChild(tr)
            tr.innerHTML = ` <td >${value1}</td>
        <td id="d1">${value2}</td>
        <th><button class="sc" onclick="delRow(this)">删除</button></th>
        <th><button class="sc" onclick="updataRow(this)">修改</button></th>`
            iin.style.display = 'none';
        })