JavaScript DOM Demo

最新推荐文章于 2025-11-28 04:56:28 发布

原创最新推荐文章于 2025-11-28 04:56:28 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

Example01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js_dom_demo</title>
<script type="text/javascript">
	function show() {
		document.getElementById("info").innerHTML = "<h1>Hello World</h1>";
	}
</script>
</head>
<body>
	<form action="" method="post">
		<input type="button" value="显示" onclick="show()">
		<span id="info"></span>
	</form>
</body>
</html>

Example02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js_dom_demo2</title>
<script type="text/javascript">
	function setArea() {
		var id = [1, 2, 3];
		var value = ["北京", "上海", "广州"];
		var select = document.getElementById("area");
		select.length = 1; 						// 表示每次可以选择的内容是1个
		select.options[0].selected = true;		// 设置第一个为默认选中
		
		for (var i = 0; i < id.length; i++) {
			// 创建option的节点
			var option = document.createElement("option");
			option.setAttribute("value", id[i]);
			// 在option子节点之中增加文本节点
			option.appendChild(document.createTextNode(value[i]));
			// 增加子节点
			select.appendChild(option); 			
		}
	}
</script>
</head>
<body onload="setArea()">
	<form action="" method="post">
		<select name="area" id="area">
			<option value="0">--没有地区--</option>
		</select>
	</form>
</body>
</html>

Example03

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js_dom_demo3</title>
<script type="text/javascript">
	var count = 3;
	function addrow() {
		var table = document.getElementById("mytab");
		var tr = table.insertRow(-1);				// 增加一个新的行
		var td1 = tr.insertCell(-1); 				// 增加列 
		var td2 = tr.insertCell(-1); 				// 增加列 
		var td3 = tr.insertCell(-1); 				// 增加列 
		
		var btn = document.createElement("input");
		btn.setAttribute("type", "button");
		btn.setAttribute("value", "-");
		btn.onclick = function() {
			deleterow(this);
		}
		td1.appendChild(document.createTextNode("Hello " + count));
		td2.appendChild(document.createTextNode("World " + count));
		td3.appendChild(btn);
		
		count++;
	}
	
	function deleterow(btn) {
		var tr = btn.parentNode.parentNode;
		var table = document.getElementById("mytab");
		table.deleteRow(tr.rowIndex);
		
		count--;
	}
</script>
</head>
<body>
	<input type="button" value="+" onclick="addrow()">
	<table id="mytab" border="1">
		<tr>
			<td>Hello 1</td>
			<td>World 1</td>
			<td><input type="button" value="-" onclick="deleterow(this)"></td>
		</tr>
		<tr>
			<td>Hello 2</td>
			<td>World 2</td>
			<td><input type="button" value="-" onclick="deleterow(this)"></td>
		</tr>
	</table>
</body>
</html>

Example04

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js_dom_demo4</title>
<script type="text/javascript">
	function addrow() {
		var tab = document.getElementById("mytab");
		var id = document.getElementById("id").value;
		var name = document.getElementById("name").value;
		
		var tbody = document.createElement("tbody");
		var tr = document.createElement("tr");
		var td_id = document.createElement("td");
		var td_name = document.createElement("td");
		
		td_id.appendChild(document.createTextNode(id));
		td_name.appendChild(document.createTextNode(name));
		tr.appendChild(td_id);
		tr.appendChild(td_name);
		tbody.appendChild(tr);
		tab.appendChild(tbody);
	}
</script>
</head>
<body> 
	新的编号：<input type="text" id="id" name="id">
	新的姓名：<input type="text" id="name" name="name">
	<input type="button" value="增加" onclick="addrow()">
	<table id="mytab" border="1">
		<tr>
			<td>编号</td>
			<td>姓名</td>
		</tr>
	</table>
</body>
</html>