table 随笔增加/删除行

最新推荐文章于 2022-11-18 09:59:05 发布

lovessea

最新推荐文章于 2022-11-18 09:59:05 发布

阅读量185

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/u014117094/article/details/81508701

版权

Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
        body {
            font-size: 13px;
            line-height: 25px;
        }

        table {
            border-top: 1px solid #333;
            border-bottom: 1px solid #333;
            width: 900px;
        }

        td {
            border-right: 1px solid #333;
            border-bottom: 1px solid #333;
        }

        .title {
            text-align: center;
            font-weight: bold;
            background: #ccc;
        }

        .center {
            text-align: center;
        }

        #displayInfo {
            color: red;
        }
    </style>
    <script type="text/javascript">
        function addRow() {
            //原来的行数    比如：此处获得表格的行数是5，则每一行对应的index是0~4，所以下面在insertRow时，使用的是表格的当前行数
            var currentRows = document.getElementById("list_table").rows.length;
            var insertTr = document.getElementById("list_table").insertRow(currentRows - 1);


            var insertTd = insertTr.insertCell(0);
            insertTd.style.textAlign = "center";
            insertTd.innerHTML = "<input name='limit_time' value='' type='text' class='Wdate' onfocus='WdatePicker()' style='width: 100px'/>";

            insertTd = insertTr.insertCell(1);
            insertTd.style.textAlign = "center";
            insertTd.innerHTML = "<input id='limit" + currentRows + "' name='limit' value='' class='input_M'/>";

            insertTd = insertTr.insertCell(2);
            insertTd.style.textAlign = "center";
            insertTd.innerHTML = "<select id='user" + currentRows + "' name='fk_user_id' class='select_S'>" +
            "<option value=''>请选择...</option>" +
            "<c:forEach items='${userList}' var='user'>" +
            "<option value='${user.id}'>${user.loginName}</option>" +
            "</c:forEach></select>";
            insertTd = insertTr.insertCell(3);
            insertTd.style.textAlign = "center";

            
            insertTd.innerHTML = "<input  type='button'  value='删除' class='button_add' onclick='javascript:delRow(this)'>";
        }

        function delRow(prem) {
            //获取按钮所在的行
            var index = prem.parentNode.parentNode.rowIndex;
            document.getElementById('list_table').deleteRow(index);
        }
    </script>

	</head>
	<body>
		<div class="DIVoverflow">
            <table id="list_table" cellpadding="0" cellspacing="0" width="100%" style="border:1px solid #9AC0CD;" class="">
                <tr>
                    <td style="text-align: center;">处理时限</td>
                    <td style="text-align: center;">相关要求</td>
                    <td style="text-align: center;">责任人</td>
                    <td style="text-align: center;">操作</td>
                </tr>
                <tr>
                <tr><td style="text-align: center;"><input name="limit_time" value="" type="text" class="Wdate" onfocus="WdatePicker()" style="width: 100px"></td><td style="text-align: center;"><input id="limit5" name="limit" value="" class="input_M"></td><td style="text-align: center;"><select id="user5" name="fk_user_id" class="select_S"><option value="">请选择...</option><option value="${user.id}">${user.loginName}</option></select></td><td style="text-align: center;"><input type="button" value="添加" class="button_add" onclick="javascript:addRow()"></td></tr>

                </tr>
            </table>
        </div>

	</body>
</html>