保存数据——删除

最新推荐文章于 2022-10-09 23:21:45 发布

凉笙默染

最新推荐文章于 2022-10-09 23:21:45 发布

阅读量189

点赞数

本文链接：https://blog.csdn.net/weixin_39599065/article/details/78724200

版权

<!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>

</html>

阅读全文

凉笙默染

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
保存数据——删除

tr:nth-child(2n) { background-color: aquamarine; } table { width: 480px; border: 1px solid; } function add() { //创建行文本 var tr = document.createEle
复制链接

扫一扫