JavaScript中DOM相关方法二-CSDN博客

本文链接：https://blog.csdn.net/qq_43512372/article/details/123806948

JavaScript中DOM相关方法二

省市联动
动态生成表格
表单提交方式

省市联动

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
<select id="country" onchange="addone(this.value);">
	<option value="0">--请选择--</option>
	<option value="中国">中国</option>
	<option value="日本">日本</option>
	<option value="美国">美国</option>
	<option value="德国">德国</option>
</select>
<select id = "city">

</select>
<script type="text/javascript" >
function addone(val){
var arr = new Array(4);
	arr[0] = ["中国","南京","抚州","临洮","日喀则","哈密"];
	arr[1] = ["美国","华盛顿","底特律","休斯顿","纽约"];
	arr[2] = ["德国","慕尼黑","柏林","法兰克福","狼堡"];
	arr[3] = ["日本","东京","北海道","大阪","广岛","长崎"];
		var selone = document.getElementById("city");
		var options = selone.getElementsByTagName("option");
		for(var i=0;i<options.length;i++){
			var option = options[i];
			selone.removeChild(option);
			i--;
		}
		
		for(var m=0;m<arr.length;m++){
		
			var firstcountry = arr[m];
			if(firstcountry[0]==val){
				for(var j=1;j<firstcountry.length;j++){
					var op = document.createElement("option");
					var tex = document.createTextNode(firstcountry[j]);
					op.appendChild(tex);
					selone.appendChild(op);
				}
			}
			
		}
	}
</script>
</body>
</html>

动态生成表格

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
行：<input type="text" id="hang"/><br>
列：<input type="text" id="lie"/><br>
<input type="button" value="生成" onclick="con();"/>
<div id = "divv">

</div>
<script type="text/javascript" >
//	动态生成表格************************************
	function con(){
		var tab = "<table border='1' bordercolor='blue'>";
		var h = document.getElementById("hang").value;
		var l = document.getElementById("lie").value;
//		alert(h);
//		alert(l);
		for(var i = 0;i<h;i++){
			tab+="<tr>";
			for(var j=0;j < l;j++){
				tab+="<td>aaaaaaaaaaaaaa</td>";
			}
			tab+="</tr>";
		}
		tab += "</table>";
		var divv = document.getElementById("divv");
		divv.innerHTML=tab;
		
	}
</script>
</body>
</html>

表单提交方式

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>
<form id="form1">
	<input type = "text" id ="id1" value="请输入:" name = "username" onfocus="focus1();" onblur="blur1();"/><br>
	<input type =  "button" value = "提交" onclick="formone();"/>
</form>
<script type="text/javascript" >
function formone(){
		var f = document.getElementById("form1");
		f.action="login.jsp";
		f.submit();
	}
	
	function focus1(){
		var inp= document.getElementById("id1");
		inp.value="";
	}
	function blur1(){
		var inp= document.getElementById("id1");
		inp.value="请输入:";
	}
</script>
</body>
</html>