码迷,mamicode.com
首页 > 编程语言 > 详细

javascript添加删除行信息

时间:2017-05-07 10:06:19      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:for   src   element   ide   this   textbox   lan   border   closed   

技术分享
<%@ 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添加删除行信息

标签:for   src   element   ide   this   textbox   lan   border   closed   

原文地址:http://www.cnblogs.com/JueXiaoQiang/p/6819441.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!