Java Web学习笔记(五) 记录表单的实现(二)

其他 2019-01-21 09:51:11 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/l1832876815/article/details/86549467

实训第四天笔记
实现了简单记录表单的添加，删除，修改，模糊查询操作，添加了多选复选框，单选框，下拉框以及文本域的增删改操作。

代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>记录列表</title>

<script type="text/javascript">
	var ct_name = [ '北京', '青岛', '上海', '深圳' ];
	var oInput = document.getElementsByTagName('input');
	var oCity = document.getElementsByTagName('option');
	var oIntro = document.getElementsByTagName('textArea');
	var Id = 1;
	/*
	 *时间管理
	 */
	var getTime = function() {
		var date = new Date();
		var date_str = date.toLocaleString();
		document.getElementById('time').innerHTML = date_str;
	}

	var timeGetter = setInterval(getTime, 1000);

	/*
	 * 添加用户
	 */
	function add() {
		var name = oInput[0].value;
		var sex = oInput[1].checked ? '男' : '女';
		var age = oInput[3].value;
		var lan = "无,";
		var flag = 0;
		if (oInput[4].checked == true) {
			if (flag == 0) {
				lan = "";
				flag = 1;
			}
			lan += "Java,"
		}
		if (oInput[5].checked == true) {
			if (flag == 0) {
				lan = "";
				flag = 1;
			}
			lan += "C++,"
		}
		if (oInput[6].checked == true) {
			if (flag == 0) {
				lan = "";
				flag = 1;
			}
			lan += "Python,"
		}

		var city = new String();
		if (oCity[0].selected == true) {
			city = "北京";
		} else if (oCity[1].selected == true) {
			city = "青岛";
		} else if (oCity[2].selected == true) {
			city = "上海";
		} else if (oCity[3].selected == true) {
			city = "深圳";
		}

		var intro = oIntro[0].value;
		if (intro.length > 50) {
			intro = intor.substring(0, 50);
		}

		lan = lan.substring(0, lan.length - 1);
		if (name == '' || sex == '' || age == '' || /\d+/.test(name)
				|| /\D+/.test(age)) {
			alert("输入格式不正确！");
		}
		console.log(name + " " + sex + " " + age + " " + lan + " " + city + " "
				+ intro);

		var oTr = document.createElement('tr');

		var oTd = document.createElement('td');
		oTd.innerHTML = Id++;
		oTr.appendChild(oTd);

		oTd = document.createElement('td');
		oTd.innerHTML = name;
		oTr.appendChild(oTd);

		oTd = document.createElement('td');
		oTd.innerHTML = sex;
		oTr.appendChild(oTd);

		oTd = document.createElement('td');
		oTd.innerHTML = age;
		oTr.appendChild(oTd);

		oTd = document.createElement('td');
		oTd.innerHTML = lan;
		oTr.appendChild(oTd);

		oTd = document.createElement('td');
		oTd.innerHTML = city;
		oTr.appendChild(oTd);

		oTd = document.createElement('td');
		oTd.innerHTML = "<a href='#'>删除</a>&nbsp;&nbsp;<a href='#'>修改</a>";

		var op = oTd.getElementsByTagName('a');
		op[1].onclick = m_update;
		op[0].onclick = m_delete;
		oTr.appendChild(oTd);

		document.getElementById('tbody').appendChild(oTr);
	}

	/*
	 * 删除
	 */
	var m_delete = function() {
		var cur_tr = this.parentNode.parentNode;
		cur_tr.style.backgroundColor = 'yellow';
		if (confirm("是否确认删除?")) {
			document.getElementById('tbody').removeChild(cur_tr);
		} else {
			cur_tr.removeAttribute('style');
		}
	};

	/*
	 * 更新
	 */
	var m_update = function() {
		var cur_td = this.parentNode;//<td>
		var tCity = cur_td.previousSibling;
		var tLan = tCity.previousSibling;
		var tAge = tLan.previousSibling;
		var tSex = tAge.previousSibling;
		var tName = tSex.previousSibling;
		var thisId = tName.previousSibling.innerHTML;//<td>id</td>

		var thisCity = tCity.innerHTML;
		var thisLan = tLan.innerHTML;
		var thisAge = tAge.innerHTML;
		var thisSex = tSex.innerHTML;
		var thisName = tName.innerHTML;
		console.log(thisName + " " + thisSex + " " + thisAge + " " + thisLan
				+ " " + thisCity);

		tCity.innerHTML = '<select name="tCity'+thisId+'" ><option selected value="1">北京</option><option value="2">青岛</option><option value="3">上海</option><option value="4">深圳</option></select>';
		var select = tCity.getElementsByTagName('option');
		for (var i = 0; i < select.length; i++) {
			if (select[i].innerHTML == thisCity) {
				select[i].selected = true;
				break;
			}
		}

		tLan.innerHTML = '<input type="checkbox" name="tLan'+thisId+'" value="Java">Java</input><input type="checkbox" name="tLan'+thisId+'" value="C++">C++</input><input type="checkbox" name="tLan'+thisId+'" value="Python">Python</input>';
		var chkbox = tLan.getElementsByTagName('input');
		for (var i = 0; i < chkbox.length; i++) {
			if (thisLan.length >= chkbox[i].value.length
					&& thisLan.indexOf(chkbox[i].value) > -1) {
				chkbox[i].checked = true;
			} else {
				chkbox[i].checked = false;
			}
		}

		tAge.innerHTML = "<input type='text' id='tAge"+thisId+"' value='"+thisAge+"'></input>";

		tSex.innerHTML = '<input type="radio" checked name="tSex'+thisId+'" id="sex1" /> <label for="sex1">男</label> <input type="radio" name="tSex'+thisId+'" id="sex2" /> <label for="sex2">女</label>'
		var radio = tSex.getElementsByTagName('input');
		if (thisSex == '男') {
			radio[0].checked = true;
		} else {
			radio[1].checked = true;
		}

		tName.innerHTML = '<input type="text" id="tName'+thisId+'"  value="'+thisName+'"/>';

		cur_td.innerHTML = '<a href="javascript:;">保&nbsp;存</a>'
		cur_td.getElementsByTagName('a')[0].onclick = function() {

			var cname = document.getElementById('tName' + thisId).value;
			var cage = document.getElementById('tAge' + thisId).value;
			if (cname == '' || cage == '' || /\d+/.test(cname)
					|| /\D+/.test(cage)) {
				alert("输入格式不正确！")
				return;
			}

			var cty = document.getElementsByName("tCity" + thisId)[0]
					.getElementsByTagName('option');
			for (var i = 0; i < cty.length; i++) {
				if (cty[i].selected == true) {
					tCity.innerHTML = ct_name[cty[i].value - 1];
					break;
				}
			}

			var csx = document.getElementsByName('tSex' + thisId);
			if (csx[0].checked) {
				tSex.innerHTML = '男';
			} else {
				tSex.innerHTML = '女';
			}

			var clan = document.getElementsByName('tLan' + thisId);
			var lan = "无,";
			var flag = 0;
			if (clan[0].checked == true) {
				if (flag == 0) {
					lan = "";
					flag = 1;
				}
				lan += "Java,"
			}
			if (clan[1].checked == true) {
				if (flag == 0) {
					lan = "";
					flag = 1;
				}
				lan += "C++,"
			}
			if (clan[2].checked == true) {
				if (flag == 0) {
					lan = "";
					flag = 1;
				}
				lan += "Python,"
			}

			tLan.innerHTML = lan.substring(0, lan.length - 1);

			tName.innerHTML = cname;
			tAge.innerHTML = cage;
			cur_td.innerHTML = "<a href='#'>删除</a>&nbsp;&nbsp;<a href='#'>修改</a>";
			var op = cur_td.getElementsByTagName('a');
			op[1].onclick = m_update;
			op[0].onclick = m_delete;
		}

	}

	/*
	 * 查找用户
	 */
	function search() {
		var name = oInput[7].value;
		var city = new String();
		if (oCity[4].selected == true) {
			city = "北京";
		} else if (oCity[5].selected == true) {
			city = "青岛";
		} else if (oCity[6].selected == true) {
			city = "上海";
		} else if (oCity[7].selected == true) {
			city = "深圳";
		}

		if (name == '' || /\d+/.test(name)) {
			alert("输入格式不合法");
		}
		console.log(name + " " + city);

		var gTr = document.getElementsByTagName('tr');
		for (var i = 2; i < gTr.length; i++) {

			gTr[i].removeAttribute('style');
			if (gTr[i].cells[1].innerHTML.indexOf(name) > -1
					&& gTr[i].cells[5].innerHTML == city) {
				gTr[i].style.backgroundColor = 'red';
			}
		}
	}
</script>
</head>
<body>

	<div>记录列表</div>
	<br>
	<div id="time" style="color: red;"></div>
	<br>
	<div>
		姓名:&nbsp;<input type="text" placeholder="请输入姓名..." /><br> <br>
		性别:&nbsp;<input type="radio" checked name="sex" id="sex1" /> <label
			for="sex1">男&nbsp;&nbsp;</label> <input type="radio" name="sex"
			id="sex2" /> <label for="sex2">女&nbsp;&nbsp;</label><br> <br>
		年龄:&nbsp;<input type="text" placeholder="请输入年龄..." /><br> <br>
		语言:&nbsp;<input type="checkbox" name="language">Java</input>&nbsp; <input
			type="checkbox" name="language">C++</input>&nbsp; <input
			type="checkbox" name="language">Python</input>&nbsp;<br> <br>
		所在城市:&nbsp;<select name="city">
			<option selected value="1">北京</option>
			<option value="1">青岛</option>
			<option value="1">上海</option>
			<option value="1">深圳</option>
		</select><br> <br>
		<textarea rows="10" cols="20" placeholder="自我介绍(最多50字)" maxlength="50"></textarea>
		<br> <br>
		<button onclick="add()">添加</button>
		<br> <br> <br> <br> 姓名:&nbsp;<input type="text"
			placeholder="姓名..." />&nbsp;&nbsp;&nbsp; 城市:&nbsp;<select
			id="search_city">
			<option selected value="1">北京</option>
			<option value="2">青岛</option>
			<option value="3">上海</option>
			<option value="4">深圳</option>
		</select>&nbsp;&nbsp;&nbsp;
		<button onclick="search()">搜索</button>
		<br> <br>

		<table style="border: 1px solid black; width: 1200px;">
			<thead>
				<tr>
					<th style="width: 100%; text-align: center; color: red">所有记录</th>
				</tr>
			</thead>
		</table>
		<table style="border: 1px solid black; width: 1200px;">
			<thead>
				<tr>
				<tr>
					<th style="width: 5%; text-align: left;">Id</th>
					<th style="width: 15%; text-align: left;">姓名</th>
					<th style="width: 15%; text-align: left;">性别</th>
					<th style="width: 15%; text-align: left;">年龄</th>
					<th style="width: 20%; text-align: left;">语言</th>
					<th style="width: 10%; text-align: left;">城市</th>
					<th style="width: 20%; text-align: left;">操作</th>
				</tr>
			</thead>
			<tbody id="tbody"></tbody>
		</table>

	</div>

</body>
</html>
页面效果

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/l1832876815/article/details/86549467
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022