通过JavaScript对表格进行操作

利用JavaScript对表单进行一些操作
目标要求

如图所示,通过填写表单,将新数据添加到表格中。此外,还能对添加的数据进行修改或者删除。

在这里插入图片描述

选择框的判断事件
function selAll()
{
	var checkAll = document.getElementsByName("selAll");
	var check = document.getElementsByName("sel");
	if(checkAll[0].checked)
	{
		for(var i=0;i<check.length;i++)
		{
			check[i].checked = true;
		}
	}
	else
	{
		for(var i=0;i<check.length;i++)
		{
			check[i].checked = false;
		}
	}
}

function sel()
{
	var checkAll = document.getElementsByName("selAll");
	var check = document.getElementsByName("sel");
	var i = 0;
	for(;i<check.length;i++)
	{
		if(check[i].checked==false)
		{
			checkAll[0].checked = false;
			break;
		}
	}
	if(i==check.length)
	{
		checkAll[0].checked = true;
	}
}
添加

1.通过ID获取到table实体对象

2.利用表格的insertRow(int row)方法在对应地方添加新的一行

3.通过ID获取到表单中的属性值

4.利用新的一行的insertCell(int cell)方法和innerHTML方法,将数据插入

function addItem()
{
	var table = document.getElementById('table');
	var len=table.rows.length;
	var row=table.insertRow(len);
	
	var number = document.getElementById('number').value;
	var name = document.getElementById("name").value;
	var sex = document.getElementsByName('sex');
	var age = document.getElementById('age').value;
	
	//innerHTML自带解析
	row.insertCell(0).innerHTML="<input type='checkbox' name='sel' οnclick='sel()' />";
	row.insertCell(1).innerHTML=number;
	row.insertCell(2).innerHTML=name;
	row.insertCell(3).innerHTML=sex[0].checked==true?sex[0].value:sex[1].value;
	row.insertCell(4).innerHTML=age;
	//this.parentNode.parentNode得到所在行
	row.insertCell(5).innerHTML=
    "<a href=# οnclick='delItem(this.parentNode.parentNode)'>删除</a>&nbsp;"
	+"<a href=# οnclick='updateItem(this.parentNode.parentNode)'>修改</a>";
	
	//添加新一行,肯定没有全选,也可以直接修改
	sel();
}

其余操作方法类似,直接贴代码

删除
function delItem(currentRow)
{
	var table = document.getElementById('table');
	if(confirm("Are you sure to delete?")){
		table.deleteRow(currentRow.rowIndex);
	}
	//删除一行,可能剩下的为全选
	sel();
}
修改并保存
function updateItem(currentRow)
{
	var table = document.getElementById('table');
	var cells=currentRow.cells;
	
	for(var i=1;i<cells.length;i++){
		if(i==cells.length-1){
			cells[i].innerHTML=
			"<a href=# οnclick='delItem(this.parentNode.parentNode)'>删除</a>&nbsp;"
			+"<a href=# οnclick='saveItem(this.parentNode.parentNode)'>保存</a>";
		}
		else{
			var oldValue=cells[i].innerText;
			cells[i].innerHTML="<input type=text  value="+oldValue+" />";
		}
		
	}
}

function saveItem(currentRow)
{
	var table = document.getElementById('table');
	var cells=currentRow.cells;
	
	for(var i=1;i<cells.length;i++){
		if(i==cells.length-1){
			cells[i].innerHTML=
			"<a href=# οnclick='delItem(this.parentNode.parentNode)'>删除</a>&nbsp;"
			+"<a href=# οnclick='updateItem(this.parentNode.parentNode)'>修改</a>";
		}
		else{
			var value=cells[i].firstChild.value;
			cells[i].innerHTML=value;
		}
	}
}
index.html的内容
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
        <title></title>
		<script src="js/create_table.js"></script>
	</head>
	<body>
		<table border='1' id="table" align="center">
			<tr>
				<th>选择</th>
				<th>学号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="selAll" onclick="selAll()" /> </td>
				<td colspan="5">全部选中</td>
			</tr>
		</table>
		<hr />
		<table border='1' align="center">
			<tr>
				<td>请输入学号</td>
				<td><input type='text' placeholder='输入11位数字学号' id="number"/></td>
			</tr>
			<tr>
				<td>请输入姓名</td>
				<td><input type='text' placeholder='输入姓名' id="name"/></td>
			</tr>
			<tr>
				<td>请选择性别</td>
				<td><input type='radio' name='sex' value='' checked='true'/><input type='radio' name='sex' value=''/></td>
			</tr>
			<tr>
				<td>请选择年龄</td>
				<td><input type='number' value='20' id="age"/></td>
			</tr>
			<tr>
				<td></td>
				<td><button type='submit' onclick='addItem()'/>确定
				<button type='reset'/>重置</td>
			</tr>
		</table>
	</body>
</html>

当然,这种方法并不完善,没有数据库,刷新页面的话数据会消失,后面还需不断完善。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值