<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="textBox.WebForm2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<input type="button" value="新增" onclick="save();" />
<br />
<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
编号
</td>
<td>
标题
</td>
<td>
摘要
</td>
<td>
作者
</td>
<td>
类别
</td>
<td>
操作
</td>
</tr>
</table>
<br />
<center>
<div id="fid" style="display: none;">
<form id="form">
标题
<input type="text" id="bid" width="12">
摘要
<input type="text" id="zid" width="12">
<br />
作者
<input type="text" id="aid" width="12">
类别
<select id="sid">
<option id="证券">证券 </option>
<option id="计算机">计算机 </option>
<option id="机械">机械 </option>
<option id="电子">电子 </option>
<option id="新闻">新闻 </option>
</select>
<br />
<p>
<input type="button" value="保存" onclick="save()">
<input type="button" id="rit" value="重置" onclick="reset_()">
</p>
</form>
</div>
</center>
<script type="text/javascript">
var res = 0;
var table = document.getElementById("myTable");
var select = document.getElementById("sid");
var flag = 0;
function save() {
if (flag == 0) {
var x = table.insertRow(-1); //往下增加
var a = x.insertCell(0);
var b = x.insertCell(1);
var c = x.insertCell(2);
var d = x.insertCell(3);
var e = x.insertCell(4);
var f = x.insertCell(5);
a.innerHTML = document.getElementById('myTable').rows.length - 1;
b.innerHTML = document.getElementById('bid').value;
c.innerHTML = document.getElementById('zid').value;
d.innerHTML = document.getElementById('aid').value;
var select = document.getElementById('sid');
var sindex = select.selectedIndex; // 当前坐标
var option = select.options[sindex];
e.innerHTML = option.text;
//将两个按钮用document写出来，不是以字符串的形式。。
var update = document.createElement("input");
update.setAttribute("type", "button");
update.setAttribute("value", "修改");
update.setAttribute("onclick", "update(this)");
f.appendChild(update);
var del = document.createElement("input");
del.setAttribute("type", "button");
del.setAttribute("value", "删除");
del.setAttribute("onclick", "dele(this)");
f.appendChild(del);
document.getElementById("fid").style.display = "none";
alert("增加成功");
res = document.getElementById('bid').value;
} else {
table.rows[flag].cells[1].innerHTML = document.getElementById('bid').value;
table.rows[flag].cells[2].innerHTML = document.getElementById('zid').value;
table.rows[flag].cells[3].innerHTML = document.getElementById('aid').value;
var select = document.getElementById('sid');
var sindex = select.selectedIndex; // 当前坐标
var option = select.options[sindex];
table.rows[flag].cells[4].innerHTML = option.text;
document.getElementById("form").reset();
document.getElementById("fid").style.display = "none";
alert("更新成功");
}
}
function update(input) {
flag = 1;
document.getElementById("bid").readOnly = true;
document.getElementById("fid").style.display = "block";
var td = input.parentNode;
var tr = td.parentNode;
flag = tr.rowIndex;
document.getElementById('bid').value = tr.cells[1].innerHTML;
document.getElementById('zid').value = tr.cells[2].innerHTML;
document.getElementById('aid').value = tr.cells[3].innerHTML;
var option = tr.cells[4].innerHTML;
document.getElementById(option).selected = true;
}
function dele(input) {
var td = input.parentNode;
var tr = td.parentNode;
var tindex = tr.rowIndex;
table.deleteRow(tindex);
var x = table.rows.length;
for (var i = 1; i < x; i += 1) {
table.rows[i].cells[0].innerHTML = i;
}
}
function reset_() {
if (flag == 0) {
document.getElementById("form").reset();
}
else {
document.getElementById("form").reset();
document.getElementById("bid").value = res;
}
}
</script>
</body>
</html>