javascript生成表格增删改查

最新推荐文章于 2021-03-31 11:13:47 发布
jie_boss
最新推荐文章于 2021-03-31 11:13:47 发布
阅读量105
点赞数
分类专栏： j2ee开发文章标签： html javascript dom ViewUI
j2ee开发专栏收录该内容
24 篇文章 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.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("标题：");
		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.onclick=function(){
			baocun();
		}

	    //reset按钮
		var buttonReset = document.createElement("input");
		buttonReset.type="reset";
		buttonReset.value="重置";
		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);
	}

	// 新增
	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 onload="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='修改' onclick='updateRow(this)'> <input type='button' value='删除' onclick='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>
jie_boss
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript生成表格增删改查

[code="html"]增删改查table{ width:100%; height:2px; border:#0C9 1px solid; border-collapse:collapse; } function createTable() { //创建表 var setTable ...
复制链接

扫一扫
专栏目录