JavaScript练习(二)

1、实现动态表格数据的增加和删除,如下图:

JavaScript练习(二)_第1张图片

实现代码:

<body style="background: #cccccc">
	<div align="center">
		姓名:<input type="text" id="name"> email:<input type="text"
			id="email"> 电话:<input type="text" id="phone"><br>
		<input type="button" id="sumbit" value="提交" onclick="add()">
		<hr>
		<table border="1px">
			<thead>
				<tr>
					<th>姓名</th>
					<th>email</th>
					<th>电话</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="users">
				<tr>
					<td>Tom</td>
					<td>[email protected]</td>
					<td>5000</td>
					<td><a href="#" onclick="deleteTr(this)">delete</a></td>
				</tr>
			</tbody>
		</table>
	</div>
</body>

脚本实现:

<script type="text/javascript">
<!--
	//添加用户
	function add() {
		var name = document.getElementById("name").value;
		var email = document.getElementById("email").value;
		var phone = document.getElementById("phone").value;
		var users = document.getElementById("users");
		//创建tr
		var tr = document.createElement("tr");
		//创建td
		var td1 = document.createElement("td");
		var td2 = document.createElement("td");
		var td3 = document.createElement("td");
		var td4 = document.createElement("td");
		//创建文本
		var nameElement = document.createTextNode(name);
		td1.appendChild(nameElement);
		var emailElement = document.createTextNode(email);
		td2.appendChild(emailElement);
		var phoneElement = document.createTextNode(phone);
		td3.appendChild(phoneElement);
		//创建删除连接
		var aElement = document.createElement("a");
		aElement.setAttribute("href", "#");
		aElement.setAttribute("onclick", "deleteTr(this)");
		aElement.appendChild(document.createTextNode("delete"));
		td4.appendChild(aElement);

		//添加到tr中
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		//tr添加到users中
		users.appendChild(tr);
	}
	function deleteTr(obj) {
		var row = obj.parentNode.parentNode;
		var tab = row.parentNode;
		tab.removeChild(row);
		alert("删除成功");
	}

2、实现如图所示:当点击全选所有都选上

JavaScript练习(二)_第2张图片


实现代码:

<body>
	<div align="center">
		请选择您的爱好! <br> <input type="checkbox" id="chk"
			onclick="Ischecked()">全选/全不选
		<div id="like">
			<input type="checkbox" onclick="deleteS()" />足球 <input
				type="checkbox" onclick="deleteS()" />蓝球 <input type="checkbox"
				onclick="deleteS()" />游泳 <input type="checkbox" onclick="deleteS()" />唱歌
			<br>
		</div>

	</div>
</body>

脚本实现:

<script type="text/javascript">
<!--
	function Ischecked() {
		var input = document.getElementsByTagName("input");
		if (input[0].getAttribute("checked") == "checked") {
			for ( var i = 0; i < input.length; i++) {
				input[i].removeAttribute("checked", "checked");
			}
		} else {
			for ( var i = 0; i < input.length; i++) {
				input[i].setAttribute("checked", "checked");
			}
		}
	}
	function deleteS() {

	}
//-->
</script>

3、实现option选择数据到另一个option中,并可以移除到另外一个option;

JavaScript练习(二)_第3张图片

实现代码:

<body style="background: #cccccc">
	<select multiple="multiple" id="select" size="12">
		<option selected="selected" value="选项1">选项1</option>
		<option value="选项2">选项2</option>
		<option value="选项3">选项3</option>
		<option value="选项4">选项4</option>
		<option value="选项5">选项5</option>
	</select>
	<select multiple="multiple" id="selected" size="12">

	</select>
	<div>
		<input type="button" value="-->" onclick="selectOne()"><br>
		<input type="button" value="==>" onclick="selectAll()"><br>
		<input type="button" value="<--" onclick="deleteOne()"><br>
		<input type="button" value="<==" onclick="deleteAll()">
	</div>
</body>

脚本代码:

<script type="text/javascript">
<!--
	//选择一项 
	function selectOne() {
		var selected = document.getElementById("selected");
		var option = document.getElementById("select").getElementsByTagName(
				"option");
		for ( var i = 0; i < option.length; i++) {
			if (option[i].getAttribute("selected") == "selected") {
				selected.appendChild(option[i]);
			}
		}
	}
	//全选
	function selectAll() {
		var selected = document.getElementById("selected");
		var option = document.getElementById("select").getElementsByTagName(
				"option");
		var len = option.length
		for ( var i = 0; i < len; i++) {
			selected.appendChild(option[0]);
		}
	}
	//移除一项
	function deleteOne() {
		var selected = document.getElementById("selected")
				.getElementsByTagName("option");
		var option = document.getElementById("select");
		for ( var i = 0; i < selected.length; i++) {
			if (selected[i].getAttribute("selected") == "selected") {
				option.appendChild(selected[i]);
			}
		}
	}
	//全移
	function deleteAll() {
		var selected = document.getElementById("selected")
				.getElementsByTagName("option");
		var option = document.getElementById("select");
		var len = selected.length;
		for ( var i = 0; i < len; i++) {
			option.appendChild(selected[0]);
		}
	}
//-->
</script>


你可能感兴趣的:(JavaScript练习(二))