1.调用appendChild方法增加input对象,设置type属性的位置
2.appendChild一个radio对象,设置该对象的name属性
3.对select控件增加和删除Option
1
<
html
>
2 < head >
3 < title > test </ title >
4 < script language ="javascript" >
5 function test(){
6 var tbodyElement=document.getElementById("tbody1");
7 var trElement=document.createElement("tr");
8 var idTDElement=document.createElement("td");
9
10 idTDElement.innerHTML=1;
11 var nameTDElement=document.createElement("td");
12
13 var inputElement=document.createElement("input");
14 nameTDElement.appendChild(inputElement);
15 inputElement.type="button";
16 //在IE中,这句话将会抛出异常,但在firefox能正常运行,如果type为text或者不设置type属性,也都能正常运行
17 inputElement.value="Invoke";
18 /**//*
19 修改成下面的语句就能正常运行:
20 var inputElement=document.createElement("input");
21 inputElement.type="button";
22 nameTDElement.appendChild(inputElement);
23 */
24
25 tbodyElement.appendChild(trElement);
26 trElement.appendChild(idTDElement);
27 trElement.appendChild(nameTDElement);
28 }
29 </ script >
30 </ head >
31 < body >
32 < input type ="button" value ="insert" onclick ='test()' >
33 < table cellpadding ="0" cellspacing ="0" border ="1" >
34 < tbody id ='tbody1' >
35 < tr >
36 < td width ="50" > ID </ td >
37 < td width ="200" > name </ td >
38 </ tr >
39 </ tbody >
40 </ table >
41 </ body >
42 </ html >
2 < head >
3 < title > test </ title >
4 < script language ="javascript" >
5 function test(){
6 var tbodyElement=document.getElementById("tbody1");
7 var trElement=document.createElement("tr");
8 var idTDElement=document.createElement("td");
9
10 idTDElement.innerHTML=1;
11 var nameTDElement=document.createElement("td");
12
13 var inputElement=document.createElement("input");
14 nameTDElement.appendChild(inputElement);
15 inputElement.type="button";
16 //在IE中,这句话将会抛出异常,但在firefox能正常运行,如果type为text或者不设置type属性,也都能正常运行
17 inputElement.value="Invoke";
18 /**//*
19 修改成下面的语句就能正常运行:
20 var inputElement=document.createElement("input");
21 inputElement.type="button";
22 nameTDElement.appendChild(inputElement);
23 */
24
25 tbodyElement.appendChild(trElement);
26 trElement.appendChild(idTDElement);
27 trElement.appendChild(nameTDElement);
28 }
29 </ script >
30 </ head >
31 < body >
32 < input type ="button" value ="insert" onclick ='test()' >
33 < table cellpadding ="0" cellspacing ="0" border ="1" >
34 < tbody id ='tbody1' >
35 < tr >
36 < td width ="50" > ID </ td >
37 < td width ="200" > name </ td >
38 </ tr >
39 </ tbody >
40 </ table >
41 </ body >
42 </ html >
2.appendChild一个radio对象,设置该对象的name属性
1
var
nameTDElement
=
document.createElement(
"
td
"
);
2 var radioElement = document.createElement( " input " );
3 radioElement.type = " radio " ;
4 nameTDElement.appendChild(inputElement);
5 radioElement.name = " testRadioName " ; // 这句话在firefox是起作用的,但在IE下是不起作用的
6 /**/ /*解决的办法是
7 var radioElement=document.createElement("<input name='testRadioName'>");
8 radioElement.type="radio";
9 nameTDElement.appendChild(inputElement);
10 */
2 var radioElement = document.createElement( " input " );
3 radioElement.type = " radio " ;
4 nameTDElement.appendChild(inputElement);
5 radioElement.name = " testRadioName " ; // 这句话在firefox是起作用的,但在IE下是不起作用的
6 /**/ /*解决的办法是
7 var radioElement=document.createElement("<input name='testRadioName'>");
8 radioElement.type="radio";
9 nameTDElement.appendChild(inputElement);
10 */
3.对select控件增加和删除Option
1
<
html
>
2 < head >
3 < title > test </ title >
4 < script language ="javascript" >
5 function deleteRow(){
6 var selectElement=document.getElementById("select1");
7 selectElement.options.remove(1); //IE:OK Firefox:Failure
8 selectElement.remove(1); //IE:OK Firefox:OK
9 }
10 function insertRow(){
11 var selectElement=document.getElementById("select1");
12 var option=new Option("eeee",5);
13 selectElement.add(option); //IE:OK Firefox:Failure
14 selectElement.options.add(option);//IE:OK Firefox:OK
15 }
16 </ script >
17 </ head >
18 < body >
19 < input type ="button" value ="Delete" onclick ='deleteRow()' >
20 < input type ="button" value ="Insert" onclick ='insertRow()' >
21 < select id ="select1" >
22 < option value ="1" > aaa </ option >
23 < option value ="2" > bbb </ option >
24 < option value ="3" > ccc </ option >
25 < option value ="4" > ddd </ option >
26 </ select >
27 </ body >
28 </ html >
2 < head >
3 < title > test </ title >
4 < script language ="javascript" >
5 function deleteRow(){
6 var selectElement=document.getElementById("select1");
7 selectElement.options.remove(1); //IE:OK Firefox:Failure
8 selectElement.remove(1); //IE:OK Firefox:OK
9 }
10 function insertRow(){
11 var selectElement=document.getElementById("select1");
12 var option=new Option("eeee",5);
13 selectElement.add(option); //IE:OK Firefox:Failure
14 selectElement.options.add(option);//IE:OK Firefox:OK
15 }
16 </ script >
17 </ head >
18 < body >
19 < input type ="button" value ="Delete" onclick ='deleteRow()' >
20 < input type ="button" value ="Insert" onclick ='insertRow()' >
21 < select id ="select1" >
22 < option value ="1" > aaa </ option >
23 < option value ="2" > bbb </ option >
24 < option value ="3" > ccc </ option >
25 < option value ="4" > ddd </ option >
26 </ select >
27 </ body >
28 </ html >