JS动态操作表单

最新推荐文章于 2024-06-13 08:10:56 发布

footprint01

最新推荐文章于 2024-06-13 08:10:56 发布

阅读量722

点赞数

本文链接：https://blog.csdn.net/footprint01/article/details/82802559

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        #main {
            border-collapse: collapse;
            width: 80%;
            margin: auto;
        }
        table, tr, td, th {
            border: 1px solid #ABABAB;
        }
        th, td {
            text-align: center;
        }
    </style>
</head>
<body>
  <a href="javascript:addRow();">添加行</a>
  &nbsp;&nbsp;
  <a href="javascript:removeRow();">删除行</a>
  <hr>
  <table id="main">
      <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>学分</th>
        </tr>
      </thead>
      <tbody>               //如果想添加内容在body里面则需要先写tbody代码一行才能实现，建议本行不删除
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>学分</th>
        </tr>
      </tbody>
  </table>
</body>
<script type="application/javascript">
    var _table = document.getElementById("main");

    /**
     * 添加行、列
     */
    function addRow() {
        var _tr = _table.insertRow(),
            _td = null;

        for (var i = 0; i < 5; i++) {
            _td = _tr.insertCell();
            _td.innerText = _table.rows.length + "" + (i + 1);
            if (i == 4) {
                _td.style.textAlign = "right";
            }
        }
    }

    /**
     * 删除行
     */
    function removeRow() {
        _table.deleteRow(_table.rows.length - 1);
    }
</script>
</html>

footprint01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS动态操作表单

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;style type="text/css"&gt; #main { border-collapse: collapse;
复制链接

扫一扫