Html无序列表ul控件实现行上下移动.

最新推荐文章于 2021-10-21 22:38:59 发布

开心乐源

最新推荐文章于 2021-10-21 22:38:59 发布

阅读量4.2k

点赞数

分类专栏：脚本技术文章标签： javascript ul控件移动 web开发

本文链接：https://blog.csdn.net/hacode/article/details/8027362

版权

脚本技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
	<head>
		<title> new document </title>
		<meta name="generator" content="editplus">
		<meta name="author" content="">
		<meta name="keywords" content="">
		<meta name="description" content="">
	</head>
 
	<body>
		<div id="mergeCase"></div>
		<input type = "button" value = "动态生成" onclick = "mergeCase(3)">
		<input type="button" value="遍历" οnclick="trace()" />

		<input type="button" οnclick="upSwap()" value="up"/>
		<input type="button" οnclick="downSwap()" value="down"/>
		<input type="button" οnclick="del()" value="del"/>
	</body>

	<script>
	// 创建一个ul
	var ul = document.createElement("ul");
	ul.id = "oList";

	// 创建div
	var div = document.getElementById('mergeCase');

	// 把ul放置到div中
	div.appendChild(ul);	

	// 遍历所有的li条目
	function trace()
	{
		var strTest = "";
		for (var i = 0; i < ul.childNodes.length; i ++)
		{
			strTest += ul.childNodes[i].childNodes[1].innerText;
		}
		alert(strTest);
	}

	// 当用户点击某一个li的时候，做一下标记，记住选中
	function select(li)
	{
		// 先清除所有li的选中状态
		for (var i = 0; i < ul.childNodes.length; i ++)
		{
			ul.childNodes[i].style.listStyleType="none";
		}
		// 设置用户点击li的选中状态
		li.style.listStyleType="circle";
	}	

	function createItem(txt1, txt2)
	{		
		// 创建一个li
		var li = document.createElement("li");
		
		// 创建2个span，用于放置text
		var inputname = document.createElement("span");
		var inputresolution =  document.createElement("span");

		// 设置text
		inputname.innerText = "(-) " + txt1;
		inputresolution.innerText = txt2;

		// 设置li的style属性
		li.style.listStyleType="none";

		// 添加span控件到li
		li.appendChild(inputname);
		li.appendChild(inputresolution);
		
		// 注册li的onclick事件
		li.onclick = function ()
		{
			select(this);
		}
		// li已经装配完毕，返回给ul，用于添加
		return li;
	}

	// 创建指定数量的li
	function mergeCase(count){
		for( var i = 0; i<count; i++){
			var li = createItem("VideoName:" + (Math.round(Math.random()*1000)) + "   "
				, "VideoId:" + (i) + "");
			ul.appendChild(li);
		}  
	}

	// 向上移动
	function downSwap(){
		var s = document.getElementById("oList");
		var  w = s.childNodes.length;
		for (var i = 0;i < w; i++ ){  
			if (s.children(i).style.listStyleType == "circle" && s.children(i).nextSibling != null)
			{
				// Ie下面有效的api，ff和chrome不确定是否支持
				s.children(i).swapNode(s.children(i).nextSibling);
				return ;
			}
		}
	}
	  
	// 向下移动
	function upSwap(){
		var s = document.getElementById("oList");
		var  w = s.childNodes.length;
		for (var i = 0;i < w; i++ ){  
			if (s.children(i).style.listStyleType == "circle" && s.children(i).previousSibling != null)
			{
				s.children(i).swapNode(s.children(i).previousSibling);
				return ;
			}
		}
	}

	// 删除一个li条目
	function del(){
		var s = document.getElementById('oList');
		var w = s.childNodes.length;
		for (var i = 0;i < w; i++ ){  
			if (s.children(i).style.listStyleType == "circle")
			{
				s.removeChild(s.childNodes[i]);
				return ;
			}
		}  
	}
	</script>
</html>

开心乐源

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html无序列表ul控件实现行上下移动.

new document // 创建一个ul var ul = document.createElement("ul"); ul.id = "oList"; // 创建div var div = document.getElementById('merge
复制链接

扫一扫

专栏目录