javascript添加删除行信息

Posted 倔小强

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

 

以上是关于javascript添加删除行信息的主要内容,如果未能解决你的问题,请参考以下文章

如何管理在每个 git 版本中添加私有代码片段?

覆盖javascript以消除闪烁

sublime text 3 添加 javascript 代码片段 ( snippet )

在表中添加和删除行 [带输入字段]

Html 使用 javascript 动态添加和删除行

教程4 - 验证和权限