• 运用js脚本实现table自动添加、删除行


    1前台代码:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddTable.aspx.cs" Inherits="AddTable" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <script type="text/javascript">
            function tableAddRow(tableName) {
                var row = tableName.insertRow(tableName.rows.length);
                var i = tableName.rows.length - 2;
                var col;
                if (tableName == tableId)
                {
                    col = row.insertCell(0);
                    col.innerHTML = "<input type='button'  id='btnDel' name='btnDel' value='-' onclick='DelRow(this)'/>";
                    col = row.insertCell(1);
                    col.innerHTML = "<input type='text' size='12' />";
                    col = row.insertCell(2);
                    col.innerHTML = "<input type='text' size='12' />";
                    col = row.insertCell(3);
                    col.innerHTML = "<input type='text' size='12' />";
                    col = row.insertCell(4);
                    col.innerHTML = "<input type='text' size='12' />";
                    col = row.insertCell(5);
                    col.innerHTML = "<input type='text' size='12' />";
                    col = row.insertCell(6);
                    col.innerHTML = "<input type='text' size='12' />";
                    col = row.insertCell(7);
                    col.innerHTML = "<input type='text' size='12' />";
    
                }
            }
            function DelRow(obj)
            {
                var t = document.getElementById('tableId');
                t.deleteRow(obj.parentNode.parentNode.rowIndex)
               
            }
    
        </script>
    
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table style="100%" text-align="center"  border="0" id="tableId">
                    <tr>
                        <td align="center">
                            <input type="button" id="btnAdd" name="btnAdd" value="+" onclick="tableAddRow(tableId);" /></td>
                        <td align="center">编号</td>
                        <td align="center">学号</td>
                        <td align="center">姓名</td>
                        <td align="center">性别</td>
                        <td align="center">年龄</td>
                        <td align="center">专业</td>
                        <td align="center">住址</td>
                    </tr>
    
                </table>
            </div>
        </form>
    </body>
    </html>
    View Code

    2效果测试

  • 相关阅读:
    frp 多个web服务内网映射外网IP
    vue 组件和路由 cdn引入方式的写法。。。。
    Http/Https面试题整理+三次握手四次挥手
    推荐系统的工程实现
    Testner读书会暨公益图书馆项目正式启动
    学习算法
    工作流开源任务调度框架2--Azkaban
    工作流开源调度框架1- airflow
    Testner软件质量与测试创新研究中心总部落地长沙
    企业的八大类别36种盈利模式
  • 原文地址:https://www.cnblogs.com/thbbsky/p/3100332.html
Copyright © 2020-2023  润新知