<%@ 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>
