<%@ 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 { 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="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="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>