保存数据--删除

最新推荐文章于 2024-05-09 09:14:17 发布

Yang_1225

最新推荐文章于 2024-05-09 09:14:17 发布

阅读量333

点赞数

本文链接：https://blog.csdn.net/Yangweifeng_1225/article/details/78712600

版权

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   tr:nth-child(2n) {
    background-color: aquamarine;
   }

   table {
    width: 480px;
    border: 1px solid;
   }
  </style>
  <script>
   function add() {
    //创建行文本
    var tr = document.createElement("tr");
    //创建姓名，年龄，生日,删除文本，得到列
    var tdname = document.createElement("td");
    var tdage = document.createElement("td");
    var tdsr = document.createElement("td");
    var tddel = document.createElement("td");
    //创建删除按钮文本
    var del = document.createElement("button");
    //获取id的值
    var xm = document.getElementById("xm");
    var nl = document.getElementById("nl");
    var sr = document.getElementById("sr");
    //创建姓名，年龄，生日付给 id的值得到列
    tdname.innerText = xm.value;
    tdage.innerText = nl.value;
    tdsr.innerText = sr.value;
    //把列添加到行
    tr.appendChild(tdname);
    tr.appendChild(tdage);
    tr.appendChild(tdsr);
    tr.appendChild(tddel);
    //把删除付给按钮删除
    del.innerText = "删除";
    //点击删除
    del.onclick = function() {
     this.parentNode.parentNode.remove();
    }
    //把按钮添加到每一列
    tddel.appendChild(del);
    //把行添加到表
    document.getElementById("tb").appendChild(tr);
   }
  </script>
</head>