删除特定的节点(很经典哦,)
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" >
3<head>
4 <title>无标题页</title>
5
6
<script type="text/javascript" language="javascript">
7
8 window.onload=initAll;
9 var nodeArea=false;
10
11 function initAll()
12
{
13 document.getElementsByTagName("form")[0].onsubmit=nodeChanger;
14 nodeArea=document.getElementById("modifiable");
15
}
16
17 //addNode()函数
18 function addNode()
19 {
20 //alert("haha !");
21 var inText=document.getElementById("TextArea1").value;
22 //alert(inText);
23 var newText=document.createTextNode(inText);
24 //alert(newText.TagName);
25
26 var newGraf=document.createElement("p");
27 newGraf.appendChild(newText);
28
29 nodeArea.appendChild(newGraf);
30
31 //alert("stop");
32 }
33
34 //delNode();函数
35 function delNode()
36 {
37 var delChoice=document.getElementById("pCount").selectedIndex;
38
39 //alert(delChoice);
40 var allP=nodeArea.getElementsByTagName("p");
41 var killP=allP.item(delChoice);
42
43 nodeArea.removeChild(killP);
44
45
46 }
47
48 //nodeChanger函数
49 function nodeChanger()
50 {
51 var actionType=-1;
52 var pCount=nodeArea.getElementsByTagName("p").length;
53 //alert(pCount);
54 var rbl=document.getElementsByTagName("form")[0].nodeAction;
55
56 for(var i=0;i<rbl.length;i++)
57 {
58 if(rbl[i].checked)
59 {
60 actionType=i;
61 }
62 }
63 // alert(actionType);
64
65 switch(actionType)
66 {
67 case 0:
68 addNode();
69 break;
70 case 1:
71 delNode();
72 break;
73 default:
74 alert("No valid action was chosen !");
75 }
76
77 document.getElementById("pCount").options.length=0;
78 // alert("stop");
79
80 for(var i=0;i<nodeArea.getElementsByTagName("p").length;i++)
81 {
82 //alert(nodeArea.getElementsByTagName("p").length);
83 document.getElementById("pCount").options[i]=new Option(i+1);
84 }
85 //alert("1234");
86 return false;
87
88 return false;
89 }
90
91
</script>
92
93
94</head>
95<body>
96 <br />
97 <textarea id="TextArea1" style="width: 248px; height: 84px"></textarea><br />
98 <form action="#">
99 <br />
100
101 Add node<input id="Radio1" type="radio" name="nodeAction" />
102 Delete node<input id="Radio2" type="radio" name="nodeAction" /><br />
103 <br />
104 Paragraph #
105 <select id="pCount" style="width: 66px">
106 <option selected="selected"></option>
107 </select>
108
109 <input id="Submit1" type="submit" value="submit" /><br />
110 <br />
111
112 </form>
113
114 <div id="modifiable">
115
116 </div>
117
118</body>
119</html>
120
121
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml" >3
<head>4
<title>无标题页</title>5
6
<script type="text/javascript" language="javascript">
7
8
window.onload=initAll;9
var nodeArea=false;10
11
function initAll()12
{
13
document.getElementsByTagName("form")[0].onsubmit=nodeChanger;14
nodeArea=document.getElementById("modifiable");15
}16
17
//addNode()函数18
function addNode()19
{20
//alert("haha !");21
var inText=document.getElementById("TextArea1").value;22
//alert(inText);23
var newText=document.createTextNode(inText);24
//alert(newText.TagName);25
26
var newGraf=document.createElement("p");27
newGraf.appendChild(newText);28
29
nodeArea.appendChild(newGraf);30
31
//alert("stop");32
}33
34
//delNode();函数35
function delNode()36
{37
var delChoice=document.getElementById("pCount").selectedIndex;38
39
//alert(delChoice);40
var allP=nodeArea.getElementsByTagName("p");41
var killP=allP.item(delChoice);42
43
nodeArea.removeChild(killP);44
45
46
}47
48
//nodeChanger函数49
function nodeChanger()50
{51
var actionType=-1;52
var pCount=nodeArea.getElementsByTagName("p").length;53
//alert(pCount);54
var rbl=document.getElementsByTagName("form")[0].nodeAction;55
56
for(var i=0;i<rbl.length;i++)57
{58
if(rbl[i].checked)59
{60
actionType=i;61
}62
}63
// alert(actionType);64
65
switch(actionType)66
{67
case 0:68
addNode();69
break;70
case 1:71
delNode();72
break;73
default:74
alert("No valid action was chosen !");75
}76
77
document.getElementById("pCount").options.length=0;78
// alert("stop");79
80
for(var i=0;i<nodeArea.getElementsByTagName("p").length;i++)81
{82
//alert(nodeArea.getElementsByTagName("p").length);83
document.getElementById("pCount").options[i]=new Option(i+1);84
}85
//alert("1234");86
return false;87
88
return false;89
}90
91
</script>92
93
94
</head>95
<body>96
<br />97
<textarea id="TextArea1" style="width: 248px; height: 84px"></textarea><br />98
<form action="#">99
<br />100
101
Add node<input id="Radio1" type="radio" name="nodeAction" />102
Delete node<input id="Radio2" type="radio" name="nodeAction" /><br />103
<br />104
Paragraph # 105
<select id="pCount" style="width: 66px">106
<option selected="selected"></option>107
</select>108
109
<input id="Submit1" type="submit" value="submit" /><br />110
<br />111
112
</form>113
114
<div id="modifiable">115
116
</div>117
118
</body>119
</html>120
121
