javascript 表格增删改查

最新推荐文章于 2022-08-22 12:21:01 发布

zxmz66

最新推荐文章于 2022-08-22 12:21:01 发布

阅读量412

点赞数

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication1.WebForm3" %>

<!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 οnlοad="createTable()">
<form id="form1" runat="server">
<div>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>增删改查</title>
<style type="text/css">
table
{
width: 100%;
height: 2px;
border: #0C9 1px solid;
border-collapse: collapse;
}
</style>
<script type="text/javascript">

function createTable() {

//创建表
var setTable = document.createElement("table");
//设置表的属性
setTable.setAttribute('border', '1');
setTable.setAttribute('id', 'tableid');
setTable.setAttribute('cellpadding', '0');
setTable.setAttribute('cellspacing', '0');
setTable.setAttribute('width', '100%');

var tbody = document.createElement("tbody");
//创建行
var tr = document.createElement("tr");

//创建单元格
var td1 = document.createElement("td");
//设置单元格的内容
var cellContent1 = document.createTextNode("ID");

var td2 = document.createElement("td");
var cellContent2 = document.createTextNode("title ");

var td3 = document.createElement("td");
var cellContent3 = document.createTextNode("comment");

var td4 = document.createElement("td");
var cellContent4 = document.createTextNode("author");

var td5 = document.createElement("td");
var cellContent5 = document.createTextNode("type");

var td6 = document.createElement("td");
var cellContent6 = document.createTextNode("operation");

td1.appendChild(cellContent1);
tr.appendChild(td1);
tbody.appendChild(tr);

td2.appendChild(cellContent2);
tr.appendChild(td2);
tbody.appendChild(tr);

td3.appendChild(cellContent3);
tr.appendChild(td3);
tbody.appendChild(tr);

td4.appendChild(cellContent4);
tr.appendChild(td4);
tbody.appendChild(tr);

td5.appendChild(cellContent5);
tr.appendChild(td5);
tbody.appendChild(tr);

td6.appendChild(cellContent6);
tr.appendChild(td6);
tbody.appendChild(tr);

setTable.appendChild(tbody);

//创建add按钮
var button = document.createElement("input");
button.type = "button";
button.value = "add";
button.id = "addBtn";
button.onclick = function () {
trdadd();
}
document.getElementById("tableDiv").appendChild(button);
document.getElementById("tableDiv").appendChild(setTable);

//初始化全局变量table
table = document.getElementById("tableid");

/****************
form表单
****************/

//创建form表单
var form = document.createElement("form");
form.setAttribute("id", "formid");

//创建table
var createFormTable = document.createElement("table");
createFormTable.setAttribute("id", "aaid");

var form_table_tbody = document.createElement("tbody");

var form_table_tr1 = document.createElement("tr");
var form_table_tr2 = document.createElement("tr");

//单元格
var form_table_td1 = document.createElement("td");
form_table_td1.setAttribute("colspan", "6");

var form_table_td2 = document.createElement("td");
form_table_td2.setAttribute("colspan", "6");

//单元格内容
var form_table_td1_text = document.createTextNode("title：");
var form_table_td2_text = document.createTextNode("comment：");

//创建title文本框
var text1 = document.createElement("input");
text1.type = "text";
text1.id = "aid";
text1.size = "30";

//创建comment文本框
var text2 = document.createElement("input");
text2.type = "text";
text2.id = "bid";
text2.size = "30";

form_table_td1.appendChild(form_table_td1_text);
form_table_td1.appendChild(text1);
form_table_tr1.appendChild(form_table_td1);
form_table_tbody.appendChild(form_table_tr1);

form_table_td2.appendChild(form_table_td2_text);
form_table_td2.appendChild(text2);
form_table_tr1.appendChild(form_table_td2);
form_table_tbody.appendChild(form_table_tr1);

//单元格
var form_table_td3 = document.createElement("td");
form_table_td3.setAttribute("colspan", "6");

var form_table_td4 = document.createElement("td");
form_table_td4.setAttribute("colspan", "6");

//单元格内容
var form_table_td3_text = document.createTextNode("author：");
var form_table_td4_text = document.createTextNode("type：");

//创建author文本框
var text3 = document.createElement("input");
text3.type = "text";
text3.id = "cid";
text3.size = "30";

//创建下拉框
var select = document.createElement("select");
select.id = "eid";
select.name = "myname";

//创建下拉框option
var option1 = document.createElement("option");
option1.value = "1";

var option2 = document.createElement("option");
option1.value = "2";

var option3 = document.createElement("option");
option1.value = "3";

//下拉框显示的值
var value1 = document.createTextNode("security");
var value2 = document.createTextNode("sports");
var value3 = document.createTextNode("news");

//save按钮
var buttonSave = document.createElement("input");
buttonSave.type = "button";
buttonSave.value = "save";
buttonSave.id = "saveBtn";
buttonSave.onclick = function () {
baocun();
}

//reset按钮
var buttonReset = document.createElement("input");
buttonReset.type = "reset";
buttonReset.value = "reset";
buttonReset.id = "resetBtn";
buttonReset.onclick = function () {
chongzhi();
}

option1.appendChild(value1);
option2.appendChild(value2);
option3.appendChild(value3);
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);

form_table_td3.appendChild(form_table_td3_text);
form_table_td3.appendChild(text3);
form_table_tr2.appendChild(form_table_td3);
form_table_tbody.appendChild(form_table_tr2);

form_table_td4.appendChild(form_table_td4_text);
form_table_td4.appendChild(select);
form_table_tr2.appendChild(form_table_td4);
form_table_tbody.appendChild(form_table_tr2);

createFormTable.appendChild(form_table_tbody);
form.appendChild(createFormTable);
form.appendChild(buttonSave);
form.appendChild(buttonReset);
document.getElementById("fid").appendChild(form);
}

// add
function trdadd() {
flag = false;
document.getElementById("fid").style.display = "block"; //控制显示
chongzhi();
document.getElementById("aid").disabled = false; //重新启用

}

//save
function baocun() {
if (flag == false) {

add(flag);
document.getElementById("fid").style.display = "none";
} else {

add(flag);
document.getElementById("fid").style.display = "none";

}
}

//reset
function chongzhi() {
document.getElementById("formid").reset();
}

//dalete
function deleteRow(input) {
var s = input.parentNode.parentNode.rowIndex;s
document.getElementById("tableid").deleteRow(s);
var num = document.getElementById("tableid").rows.length;
for (var i = 1; i < num; i += 1) {
table.rows[i].cells[0].innerHTML = i; //把每行的每一列设为i

}
alert("dalete success！！");
}
</script>
</head>
<div id="tableDiv">
</div>
<div id="fid" style="display: none">
</div>
<script type="text/javascript">
//全局变量
var table = null;
var flag = false;
var getselectrow;
function getNum() {
var haoRow = table.rows[0];
return haoRow.cells.length;
}

//add 方法

function add(flag) {
if (!flag) {
// var num=getNum();
var row = table.insertRow(-1); //为-1时往下加（升序），为0时往上加（id降序）
var add1 = row.insertCell(0);
var add2 = row.insertCell(1);
var add3 = row.insertCell(2);
var add4 = row.insertCell(3);
var add5 = row.insertCell(4);
var add6 = row.insertCell(5);

add1.innerHTML = document.getElementById("tableid").rows.length - 1; //不加-1时id从二开始；原因：title占一个
add2.innerHTML = document.getElementById("aid").value;
add3.innerHTML = document.getElementById("bid").value;
add4.innerHTML = document.getElementById("cid").value;
var tall = document.getElementById("eid");
var index = tall.selectedIndex; // 当前坐标
var option = tall.options[index];
add5.innerHTML = option.text;
add6.innerHTML = "<input type='button' value='update' οnclick='updateRow(this)'> <input type='button' value='dalete' οnclick='deleteRow(this)'>";
//alert(num);
alert("add success！！");

} else {

var row2 = table.rows[getselectrow]; //选中当前行
//把update后的值设置到对应的文本框中
row2.cells[1].innerHTML = document.getElementById("aid").value;
row2.cells[2].innerHTML = document.getElementById("bid").value;
row2.cells[3].innerHTML = document.getElementById("cid").value;
var pall = document.getElementById("eid");
var index = pall.selectedIndex; //当前坐标
var option = pall.options[index];
row2.cells[4].innerHTML = option.text;

alert("update success！！");
}
}

//update
function updateRow(input) {
flag = true
document.getElementById("aid").disabled = true; //不能启用
document.getElementById("fid").style.display = "block";

var i = input.parentNode.parentNode.rowIndex;

getselectrow = i;
//得到选中行的内容放到文本框
document.getElementById("aid").value = table.rows[i].cells[1].innerHTML;
document.getElementById("bid").value = table.rows[i].cells[2].innerHTML;
document.getElementById("cid").value = table.rows[i].cells[3].innerHTML;

var select = document.getElementById("eid");
var index = select.selectedIndex; // 当前坐标
var option = select.options[index];
option.text = table.rows[i].cells[4].innerHTML;

}
</script>
</div>
</form>
</body>
</html>