JavaScript DOM Demo

最新推荐文章于 2024-07-31 16:33:32 发布

哈天奇不奇

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量109

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_19004/article/details/82340924

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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="显示" οnclick="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 οnlοad="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="+" οnclick="addrow()">
	<table id="mytab" border="1">
		<tr>
			<td>Hello 1</td>
			<td>World 1</td>
			<td><input type="button" value="-" οnclick="deleterow(this)"></td>
		</tr>
		<tr>
			<td>Hello 2</td>
			<td>World 2</td>
			<td><input type="button" value="-" οnclick="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="增加" οnclick="addrow()">
	<table id="mytab" border="1">
		<tr>
			<td>编号</td>
			<td>姓名</td>
		</tr>
	</table>
</body>
</html>

哈天奇不奇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM Demo

Example01&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;js_dom_demo&lt;/title&gt;&lt;script type="text/javascript"&gt; function
复制链接

扫一扫

专栏目录