javascript添加删除行信息

Posted 2020-09-17 倔小强
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript添加删除行信息相关的知识，希望对你有一定的参考价值。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StuInfo.aspx.cs" Inherits="StuManager.StuInfo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Add Student Info</title>
    <style type="text/css">
        #div1
        {
            width: 300px;
            height: 300px;
            border: 1px;
        }
    </style>
    <script type="text/javascript">
        //执行删除
        function ben_delete(DelRow) {
            //获取点击的行的tr
            var tr = DelRow.parentNode.parentNode;
            //删除tbody中的子行
            document.getElementById(‘tbody1‘).removeChild(tr);
        }
        window.onload = function () {
            document.getElementById("btn_Save").onclick = function () {
                //获取新行内容
                var name = document.getElementById("name").value;
                var age = document.getElementById("age").value;
                var tbaleobj = document.getElementById("tbody1");
                //在最上边添加一个新行
                var addRow = tbaleobj.insertRow(-1);
                //为新行插入数据
                addRow.insertCell(-1).innerHTML = name;
                addRow.insertCell(-1).innerHTML = name;
                //将按钮添加到新行内
                addRow.insertCell(-1).innerHTML = ‘<input type="button" id="btn_del" value="删除" onclick="ben_delete(this);"/>‘;
            };
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <fieldset style="width:250px;">
        <div class="#div1">
            Name：<input type="TextBox" id="name" name="user_Name" value=" " /><br/>
            Age： <input type="TextBox"id="age" name="user_Age" value=" " /><br/>
            <input type="button" id="btn_Save" name="btn_Save" value="Save"  style="margin-left:180px;margin-top:-10px;""/>
        </div>
        </fieldset>
        <div>
            <table border="1px" style="width:220px;">
                <thead>
                    <tr><td colspan="3">Student Info Table</td></tr>
                    <tr><td>Name</td><td>Age</td><td>Delete</td></tr>
                </thead>
                <tbody id="tbody1">

                </tbody>
            </table>

        </div>
    </form>
</body>
</html>
View Code