📄 index.html
字号:
<html>
<head>
<title>节点创建</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type=text/css>
.text_input { background-color: #EEEEEE; }
</style>
</head>
<body>
<form onsubmit="return false">
<button onclick="createNode(0)">增加同级节点</button>
<button onclick="createNode(1)">增加子节点</button>
<button onclick="deleteNode()">删除</button>
<button onclick="moveUp()">上移</button>
<button onclick="moveDown()">下移</button>
<button onclick="moveFront()">前移</button>
<button onclick="moveBack()">后移</button><br><br>
<span id=nodeNote class=node_note> </span><br><br>
<div id=dynamicNode>
<nobr>Root</nobr>
<div style='margin-left:17px;padding:1px;'><nobr onclick='autoSelect(this)'><img
onclick="nodeTree(this)" src='images/end.gif'><input type=radio style='display:none;'
checked name=nodeItem onpropertychange='selectNode(this)'><input type=hidden
value=1><input onfocus='autoSelect(this.parentNode)'></nobr></div>
</div>
</form>
<script language=javascript>
var icons=new Array(); //使用到的图标
icons["dot"]="images/end.gif"; //没有下级节点的图标
icons["plus"]="images/plus.gif"; //有下级节点且当前状态为展开的图标
icons["sub"]="images/min.gif"; //有下级节点且当前状态为收缩的图标
var activeNode=document.getElementById("dynamicNode").getElementsByTagName("DIV")[0];
activeNode.getElementsByTagName("INPUT")[0].checked=true;
function createNode(bChild) //创建节点。bChild为0时，创建同级节点；bChild为1时，创建子节点。
{
var nodeGrade;
if(activeNode.id=="dynamicNode")
nodeGrade=1;
else
if(bChild)
nodeGrade=parseInt(activeNode.getElementsByTagName("INPUT")[1].value)+1
else
nodeGrade=activeNode.getElementsByTagName("INPUT")[1].value
if(bChild&&activeNode.id!="dynamicNode")
if(activeNode.getElementsByTagName("IMG")[0].getAttribute("src",2)==icons["plus"])
nodeTree(activeNode.getElementsByTagName("INPUT")[0]);
var theElement=document.createElement("<DIV style='margin-left:17px;padding:1px;'>");
theElement.innerHTML="<nobr onclick='autoSelect(this)'>"+
"<img src='"+icons["dot"]+"' onclick='nodeTree(this)'>"+
"<input type=radio style='display:none;' name=nodeItem onpropertychange='selectNode(this)'>"+
"<input type=hidden value='"+nodeGrade+"'>"+
"<input onfocus='autoSelect(this.parentNode)'>"+
"</nobr>";
if(bChild||activeNode.id=="dynamicNode")
{
activeNode.insertBefore(theElement);
if(activeNode.id!="dynamicNode")
activeNode.getElementsByTagName("IMG")[0].src=icons["sub"];
}
else
activeNode.parentNode.insertBefore(theElement,activeNode.nextSibling);
theElement.getElementsByTagName("INPUT")[0].checked=true;
}
function deleteNode() //删除节点，包括该节点下的所有子节点。
{
if(!confirm("你确认要删除该节点吗？\n如果该节点下有子节点，那么连同子节点也会一并删除。\n继续请点“确定”，否则点“取消”。"))
{
activeNode.getElementsByTagName("INPUT")[2].focus();
return;
}
if(activeNode.id=="dynamicNode")
document.getElementById("nodeNote").innerHTML="没有可以删除的节点！";
else
{
theNode=activeNode
if(activeNode.nextSibling)
activeNode=activeNode.nextSibling;
else if(activeNode.previousSibling.tagName=="DIV")
activeNode=activeNode.previousSibling;
else
{
activeNode=activeNode.parentNode;
activeNode.getElementsByTagName("IMG")[0].src=icons["dot"];
}
theNode.removeNode(true);
if(activeNode.id!="dynamicNode")
activeNode.getElementsByTagName("INPUT")[0].checked=true;
}
}
function moveUp() //上移
{
if(activeNode.id=="dynamicNode")
{
document.getElementById("nodeNote").innerHTML="没有可以上移的节点！";
return;
}
if(activeNode.previousSibling.tagName!="DIV")
{
document.getElementById("nodeNote").innerHTML="该节点已位于同级节点的最上面！";
activeNode.getElementsByTagName("INPUT")[2].focus();
return;
}
theElement=activeNode.cloneNode(true);
activeNode.parentNode.insertBefore(theElement,activeNode.previousSibling);
activeNode.removeNode(true);
activeNode=theElement;
activeNode.getElementsByTagName("INPUT")[2].focus();
}
function moveDown() //下移
{
if(activeNode.id=="dynamicNode")
{
document.getElementById("nodeNote").innerHTML="没有可以下移的节点！";
return;
}
if(!activeNode.nextSibling)
{
document.getElementById("nodeNote").innerHTML="该节点已位于同级节点的最下面！";
activeNode.getElementsByTagName("INPUT")[2].focus();
return;
}
theElement=activeNode.cloneNode(true);
activeNode.parentNode.insertBefore(theElement,activeNode.nextSibling.nextSibling);
activeNode.removeNode(true);
activeNode=theElement;
activeNode.getElementsByTagName("INPUT")[2].focus();
}
function moveFront() //前移
{
if(activeNode.id=="dynamicNode")
{
document.getElementById("nodeNote").innerHTML="没有可以前移的节点！";
return;
}
if(activeNode.getElementsByTagName("INPUT")[1].value=="1")
{
document.getElementById("nodeNote").innerHTML="该节点已处于最顶级！";
activeNode.getElementsByTagName("INPUT")[2].focus();
return;
}
if(activeNode.parentNode.childNodes.length==2)
activeNode.parentNode.getElementsByTagName("IMG")[0].src=icons["dot"];
var inputs=activeNode.getElementsByTagName("INPUT");
for(var i=0; i<inputs.length; i++)
if(inputs[i].type=="hidden")
inputs[i].value=parseInt(inputs[i].value)-1;
theElement=activeNode.cloneNode(true);
activeNode.parentNode.parentNode.insertBefore(theElement,activeNode.parentNode);
activeNode.removeNode(true);
activeNode=theElement;
activeNode.getElementsByTagName("INPUT")[2].focus();
}
function moveBack() //后移
{
if(activeNode.id=="dynamicNode")
{
document.getElementById("nodeNote").innerHTML="没有可以后移的节点！";
return;
}
if(activeNode.previousSibling.tagName!="DIV")
{
document.getElementById("nodeNote").innerHTML="位于同级节点最上面的不可以向后移动！";
activeNode.getElementsByTagName("INPUT")[2].focus();
return;
}
activeNode.previousSibling.getElementsByTagName("IMG")[0].src=icons["sub"];
var inputs=activeNode.getElementsByTagName("INPUT");
for(var i=0; i<inputs.length; i++)
if(inputs[i].type=="hidden")
inputs[i].value=parseInt(inputs[i].value)+1;
theElement=activeNode.cloneNode(true);
activeNode.previousSibling.insertBefore(theElement);
activeNode.removeNode(true);
activeNode=theElement;
activeNode.getElementsByTagName("INPUT")[2].focus();
}
function selectNode(obj) //选择节点输入框时发生的动作
{
if(obj.checked)
{
obj.parentNode.getElementsByTagName("INPUT")[2].className='text_input';
obj.parentNode.getElementsByTagName("INPUT")[2].focus();
activeNode=obj.parentNode.parentNode;
}
else
obj.parentNode.getElementsByTagName("INPUT")[2].className='active_node';
}
function autoSelect(obj) //选择节点输入框
{
obj.getElementsByTagName("INPUT")[0].checked=true;
}
function nodeTree(obj) //操作节点树菜单
{
var childNodes=obj.parentNode.parentNode.childNodes;
if(childNodes.length>1)
childNodes[0].getElementsByTagName("IMG")[0].src=(childNodes[1].style.display?icons["sub"]:icons["plus"]);
for(var i=1; i<childNodes.length; i++)
childNodes[i].style.display=(childNodes[i].style.display?"":"none");
}
</script>
</body>
</html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -