JavaScript实现表格增加删除

而立终可得

已于 2022-11-26 09:01:18 修改

阅读量463

点赞数

文章标签： javascript 前端 html

于 2022-11-26 08:37:51 首次发布

本文链接：https://blog.csdn.net/qq_48128672/article/details/128047511

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    * {
      font-size: 12px;
    }
    tr{
      text-align: center;/*文本对齐居中*/
      height: 40px;
    }
    tr:nth-child(even){/*规定属于其父元素的第even个子元素的每个 tr 的背景色：*/
      /*even每个相隔的（偶数）<tr> 元素：*/
      background: #EBE7DC;
    }
  </style>
</head>
<body>
<table id="table" width="800" border="0" cellspacing="0" cellpadding="0">
  <tr style="background: #dc1742">
    <td></td>
    <td>姓名</td>
    <td>性别</td>
    <td>卡号</td>
    <td>会员级别</td>
    <td>电话号码</td>
    <td>出生日期</td>
    <td>消费金额</td>
    <td></td>
  </tr>
  <tr class="sp_0">
    <td><input type="checkbox"></td>
    <td>啊啊</td>
    <td>男</td>
    <td>4564654564645646546464</td>
    <td>648vip</td>
    <td>13911919999</td>
    <td>1998-09-09</td>
    <td>1000000</td>
    <td>
      <img class="update" src="3.jpg" width="45" height="25">
      <img class="del" src="3.jpg" width="45" height="25" onclick="deleteChild(this)">
    </td>
  </tr>
  <tr class="sp_0">
    <td><input type="checkbox"></td>
    <td>啊啊</td>
    <td>男</td>
    <td>4564654564645646546464</td>
    <td>648vip</td>
    <td>13911919999</td>
    <td>1998-09-09</td>
    <td>1000000</td>
    <td>
      <img class="update" src="3.jpg" width="45" height="25">
      <img class="del" src="3.jpg" width="45" height="25" onclick="deleteChild(this)">
    </td>
  </tr>
  <tr class="sp_0">
    <td><input type="checkbox"></td>
    <td>啊啊</td>
    <td>男</td>
    <td>4564654564645646546464</td>
    <td>648vip</td>
    <td>13911919999</td>
    <td>1998-09-09</td>
    <td>1000000</td>
    <td>
      <img class="update" src="3.jpg" width="45" height="25">
      <img class="del" src="3.jpg" width="45" height="25" onclick="deleteChild(this)">
    </td>
  </tr>
</table>
<button id="newone">新增</button>
<input type="hidden" id="htr">

<script type="text/javascript">
  window.onload=function () {
    var table = document.getElementById("table");//获取两个特定元素
    var newone = document.getElementById("newone");
    var htr = document.getElementById("htr");
    htr.value = document.getElementsByClassName("sp_0")[0].innerHTML;//value结果值 隐藏起来了

    newone.onclick = function () {

      var newRowIndex = table.rows.length;//行数
      var newRow = table.insertRow(newRowIndex)//用于在表格中的指定位置插入一个新行。
      newRow.innerHTML = htr.value;//扔htr的值  把增加的展示出来
    }
  }


  function deleteChild(r) {
    var tb = document.getElementById("table");
    var x = r.parentNode.parentNode.rowIndex;
    tb.deleteRow(x);//从表格删除指定位置的行
  }
</script>
</body>
</html>

实现结果:图片放不上，不发了

而立终可得

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现表格增加删除

javaScript实现表格增删
复制链接

扫一扫

JavaScript实现表格增加删除

“相关推荐”对你有帮助么？