通过JavaScript对表格进行操作

最新推荐文章于 2024-08-16 11:39:58 发布

Mrzhuang007

最新推荐文章于 2024-08-16 11:39:58 发布

阅读量2.1k

点赞数 3

分类专栏：前端HTML/CSS/JS

本文链接：https://blog.csdn.net/qq_17190121/article/details/98884222

版权

前端HTML/CSS/JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用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>