动态插入和删除单元行《超实用的JavaScript代码段》笔记

最新推荐文章于 2024-04-21 14:20:32 发布

sylvia_0815

最新推荐文章于 2024-04-21 14:20:32 发布

阅读量83

点赞数

分类专栏：笔记文章标签： html javascript

本文章版权只限本人所有

本文链接：https://blog.csdn.net/sylvia_0815/article/details/121922121

版权

笔记专栏收录该内容

58 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态插入和删除单元行</title>
</head>
<style>
  h3,h5,#tooltipMsg,p{
    white-space: nowrap;
  }
  td{
    border: 1px solid #ccc;
    height: 50px;
    text-align: center;
    font-size: 10pt;
    padding: 2px;
  }
</style>
<body>
  <h3>动态插入和删除单元行</h3>
  <table id="tableAct" border="1" width="500">
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </table>
  <br>
  <br>
  <input type="button" id="deleteRow" value="删除第一行">
  <input type="button" id="addRow" value="新增一行">
  <script>
    window.onload = function () {
      trAct = function (table,num,tr) {
        if (!tr) {
          var _num = table.rows[num];
          if (_num) {
            table.deleteRow(_num);
            return true;
          } else {
            return false;
          }
        } else {
          var r = table.insertRow(num),
          i = 0,
          l = tr.length;
          for (; i < l; i++) {
            r.insertCell(i).innerHTML = tr[i];
          }
          return true;
        }
      }
      var _tableAct = document.getElementById("tableAct");
      document.getElementById("deleteRow").onclick = function () {
        trAct(_tableAct,0);
      }
      document.getElementById("addRow").onclick = function () {
        trAct(_tableAct,0,[
          "新增单元格1",
          "新增单元格2"
        ]);
      }
    };
  </script>
</body>
</html>

效果：