首页 > > 网络编程 > Php编程 >

DOM的小练习，两个表格之间数据的移动

2018-06-22 05:06:31来源：未知阅读 ()

本次讲的是两个表格之间数据的移动，左边的表格移动到右边，并且左边表格移动内容消失。

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<style type="text/css">
	select {
	width: 100px;
	position: relative;
	float: left;
	}

	#div-out {
	width: 100px;
	position: relative;
	float: left;
	height: 113px;
	/border: 1px solid black;/
	}

	#div-in {
	width: 50px;
	/border: 1px solid red;/
	margin: 0px auto;
	}

	input {
	margin-top: 22px;
	width: 50px;
	}
	</style>
	</head>

	<body>
	<select id="s1" size="7" multiple="multiple">
	<option>AAA</option>
	<option>BBB</option>
	<option>CCC</option>
	<option>DDD</option>
	<option>EEE</option>
	</select>
	<div id="div-out">
	<div id="div-in">
	<input type="button" value=">>>" onclick="toright()" />
	<input type="button" value="<<<" onclick="toleft()" />
	</div>
	</div>
	<select id="s2" size="7" multiple="multiple"></select>
	</body>

	</html>
	<script type="text/javascript">
	var opt = document.getElementById("s1").options;

	function toright() {
	for(var i = 0; i < opt.length; i++) {
	if(opt[i].selected){
	// var opt_temp = document.createElement("option");
	// opt_temp.innerText = opt[i].text;
	// alert(opt[i].text);
	document.getElementById("s2").appendChild(opt[i]);
	// document.getElementById("s1").removeChild(opt[i]);
	i--;
	}
	}
	}
	</script>