课程表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>课程表</title>
		<style type="text/css">
			.top{
				width: 500px;
				height: 400px;
				border: 1px solid gray;
			}
		</style>
		
	</head>
	<body>
		<!--
        	上半部
        -->
		<div class="top" id="top">
			
		</div>
		<!--
        	下半部
        	js
        		==
        		123=="123"
        		===
        		123==="123"
        		value.indexOf(ke)
        		判断某个字符串里面是否含有某个字符，如果含有，就将资格字符所在的索引返回（第一次出现的索引）
        		如果不存在，就返回-1
        -->
		<input type="button" value = "体育" id="id0" onclick = "add(value)"/>
		<input type="button" value = "英语" id="id0" onclick = "add(value)"/>
		<input type="button" value = "数学" id="id0" onclick = "add(value)"/>
		<input type="button" value = "美术" id="id0" onclick = "add(value)"/>
		<input type="button" value = "语文" id="id0" onclick = "add(value)"/>
		
		<script type="text/javascript">
			function add(ke){
				//获取所有的课程标签，判断里面的值，如果含有按钮所代表的课程，提示用户已经存在
				var kechengs = document.getElementsByName("kecheng");
				for (var i =0;i<kechengs.length;i++) {
					var in2 = kechengs[i];
					//本质就是:取到已经存在的标签上面的值，判断是否重复
					if (in2.value.indexOf(ke)!=-1) {
						alert("课程已经存在。");
						return;
					}
				}
				//添加元素
				var in1 = document.createElement("input");
				in1.type="button";
				in1.value = ke+"   X";
				in1.setAttribute("name","kecheng");
//				in1.onclick = dele(this);//自己
				in1.setAttribute("onclick","dele(this)");
				//添加到div
				var div = document.getElementById("top");
				div.appendChild(in1);
			}
			function dele(t){
				t.remove();
			}
		</script>
		
	</body>
</html>
猜你喜欢
