页面中表格的增删改查

这篇博客详细介绍了如何在网页中实现表格的数据操作,包括单项和批量删除功能,以及新增数据的方法。用户可以通过勾选复选框,然后点击相应按钮来执行这些操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在网页中操作表格,实现增删改查等操作
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格增删改查</title>
	<style>
		table{
			border-collapse: collapse;
			width: 400px;
		}
		table,td,th{
			border:1px solid #ccc;
			text-align: center;
		}
	</style>
	<script>
		var stus = [{
			id:1001,
			name:'zhangsan',
			age:12,
			gender:'男'
		},{
			id:1002,
			name:'lisi',
			age:15,
			gender:'女'
		},{
			id:1003,
			name:'tom',
			age:12,
			gender:'男'
		},{
			id:1004,
			name:'fairy',
			age:15,
			gender:'女'
		},{
			id:1005,
			name:'tom',
			age:12,
			gender:'男'
		}];
		window.onload = function(){
			var tbody = document.getElementsByTagName('tbody')[0];
			var addBtn = document.getElementById('add');
			var batchDeleteBtn = document.getElementById('batchdelete');
			// 遍历数组,放置数据
			var str = '';
			stus.forEach(function(item){
				str += `
					<tr>
						<td><input type="checkbox"></td>
						<td>`+item.name+`</td>
						<td>`+item.age+`</td>
						<td>`+item.gender+`</td>
						<td><button>删除</button></td>
					</tr>
				`;
			});
			tbody.innerHTML = str;
			//tbody给删除按钮做代理
			tbody.onclick = function(event){
				var target = event.target;
				if(target.nodeName === 'BUTTON'){
					this.removeChild(target.parentNode.parentNode);
				}
			}
			//批量删除
			batchDeleteBtn.onclick = function(){
				//获取所有用户选中的input,循环删除对应的tr
				var inputs = document.getElementsByTagName('input');
				inputs = Array.prototype.slice.call(inputs,0);
				var inputsResult = inputs.filter(function(item){
					return item.checked === true;
				});
				// console.log(inputsResult);
				if(inputsResult.length>0){
					inputsResult.forEach(function(item){
						//item是一个一个的input
						tbody.removeChild(item.parentNode.parentNode);
					});
				}else{
					alert('请选择要删除的数据');
				}
			}
			// 新增
			addBtn.onclick = function(){
				var newTr = document.createElement('tr');
				var str = `
					<td><input type="checkbox"></td>
					<td>terry</td>
					<td>12</td>
					<td>男</td>
					<td><button>删除</button></td>
				`;
				newTr.innerHTML = str;
				tbody.appendChild(newTr);
			}
		}
	</script>
</head>
<body>
	<button id="add">新增</button>
	<button id="batchdelete">批量删除</button>
	<!-- 查看数据,单条删除,批量删除,新增 -->
	<table>
		<thead>
			<tr>
				<!-- 放置input复选框 -->
				<th>编号</th>
				<th>名字</th>
				<th>年龄</th>
				<th>性别</th>
				<!-- 放置删除按钮 -->
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
</body>
</html>

操作界面:
在这里插入图片描述

单项删除

勾选前面的复选框后再点击删除按钮可完成单项删除
在这里插入图片描述
在这里插入图片描述

批量删除

勾选多个复选框后再点击批量删除按钮可完成单项删除
在这里插入图片描述
在这里插入图片描述

新增数据

点击新增按钮可完成新增数据
在这里插入图片描述
(这里添加的信息的是代码里写好的数据)

case R.id.btn_add: String msg_add = ed_msg.getText().toString(); User user_add = new User(msg_add, null); UserDao userDao_add = new UserDao(user_add, act); if (userDao_add.add() > 0) { Toast.makeText(act.getApplicationContext(), "添加成功", Toast.LENGTH_LONG).show(); } break; case R.id.btn_check: User user_check = new User(null, null); UserDao userDao_check = new UserDao(user_check, act); Cursor cursor = userDao_check.select(); String str = ""; if (cursor.moveToFirst()) { do { int d = cursor.getColumnIndex(MyDatabase.KEY_ID); String id = cursor.getString(d); int columnIndex = cursor .getColumnIndex(MyDatabase.KEY_NAME); String s = cursor.getString(columnIndex); str = str + id + "\t" + s + "\n"; } while (cursor.moveToNext()); tv_msg.setText(str); } break; case R.id.btn_amend: String msg_update = ed_msg.getText().toString(); String id = ed_id.getText().toString(); if (msg_update.equals("")) { Toast.makeText(act, "ID不能为空", Toast.LENGTH_LONG).show(); return; } User user_update = new User(msg_update, id); // int id_update = Integer.parseInt(id); UserDao userDao_update = new UserDao(user_update, act); if (userDao_update.updata() > 0) { Toast.makeText(act.getApplicationContext(), "修改成功", Toast.LENGTH_LONG).show(); } break; case R.id.btn_delete: String id_delete = ed_id.getText().toString(); User user_delete = new User(null, id_delete); if (id_delete.equals("")) { Toast.makeText(act, "ID不能为空", Toast.LENGTH_LONG).show(); return; } UserDao userDao_delete = new UserDao(user_delete, act); if (userDao_delete.delete() > 0) { Toast.makeText(act.getApplicationContext(), "删除成功", Toast.LENGTH_LONG).show(); } ;
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值