javascript生成表格增删改查

最新推荐文章于 2021-09-26 09:47:23 发布

脚本之家

最新推荐文章于 2021-09-26 09:47:23 发布

阅读量1k

点赞数 1

分类专栏：程序人生文章标签： javascript

程序人生专栏收录该内容

207 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<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("编号");
var td2 = document.createElement("td");
var cellContent2 = document.createTextNode("标题 ");
var td3 = document.createElement("td");
var cellContent3 = document.createTextNode("摘要");
var td4 = document.createElement("td");
var cellContent4 = document.createTextNode("作者");
var td5 = document.createElement("td");
var cellContent5 = document.createTextNode("类别");
var td6 = document.createElement("td");
var cellContent6 = document.createTextNode("操作");
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);
//创建新增按钮
var button = document.createElement("input");
button.type="button";
button.value="新增";
button.id="addBtn";
button.οnclick=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("标题：");
var form_table_td2_text = document.createTextNode("摘要：");
//创建标题文本框
var text1 = document.createElement("input");
text1.type="text";
text1.id="aid";
text1.size="30";
//创建摘要文本框
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("作者：");
var form_table_td4_text = document.createTextNode("类型：");
//创建作者文本框
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("证券");
var value2 = document.createTextNode("体育");
var value3 = document.createTextNode("新闻");
//save按钮
var buttonSave = document.createElement("input");
buttonSave.type="button";
buttonSave.value="保存";
buttonSave.id="saveBtn";
buttonSave.οnclick=function(){
baocun();
}
//reset按钮
var buttonReset = document.createElement("input");
buttonReset.type="reset";
buttonReset.value="重置";
buttonReset.id="resetBtn";
buttonReset.οnclick=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);
}
// 新增
function trdadd() {
flag = false;
document.getElementById("fid").style.display = "block"; //控制显示
chongzhi();
document.getElementById("aid").disabled = false; //重新启用
}
//保存
function baocun() {
if (flag == false) {
add(flag);
document.getElementById("fid").style.display = "none";
} else {
add(flag);
document.getElementById("fid").style.display = "none";
}
}
//重置
function chongzhi() {
document.getElementById("formid").reset();
}
//删除
function deleteRow(input) {
var s = input.parentNode.parentNode.rowIndex;
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("删除成功！！");
}
</script>
</head>
<body οnlοad="createTable()">
<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;
}
//添加方法
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从二开始；原因：标题占一个
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='修改' οnclick='updateRow(this)'> <input type='button' value='删除' οnclick='deleteRow(this)'>";
//alert(num);
alert("添加成功！！");
} else {
var row2 = table.rows[getselectrow];//选中当前行
//把修改后的值设置到对应的文本框中
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("修改成功！！");
}
}
//修改
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>
</body>
</html>