<!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>
Html无序列表ul控件实现行上下移动.
最新推荐文章于 2021-06-18 04:51:03 发布