页面中表格的增删改查

在网页中操作表格,实现增删改查等操作


<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 += `
					
						
						`+item.name+`
						`+item.age+`
						`+item.gender+`
						
					
				`;
			});
			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 = `
					
					terry
					12
					男
					
				`;
				newTr.innerHTML = str;
				tbody.appendChild(newTr);
			}
		}
	script>
head>
<body>
	<button id="add">新增button>
	<button id="batchdelete">批量删除button>
	
	<table>
		<thead>
			<tr>
				
				<th>编号th>
				<th>名字th>
				<th>年龄th>
				<th>性别th>
				
				<th>操作th>
			tr>
		thead>
		<tbody>
		tbody>
	table>
body>
html>

操作界面:
页面中表格的增删改查_第1张图片

单项删除

勾选前面的复选框后再点击删除按钮可完成单项删除
页面中表格的增删改查_第2张图片
页面中表格的增删改查_第3张图片

批量删除

勾选多个复选框后再点击批量删除按钮可完成单项删除
页面中表格的增删改查_第4张图片
页面中表格的增删改查_第5张图片

新增数据

点击新增按钮可完成新增数据
页面中表格的增删改查_第6张图片
(这里添加的信息的是代码里写好的数据)

你可能感兴趣的:(DOM)