<!--dynamically generate tables, remove changes--
<meta content= "Text/html;charset=utf-8" >
<script type= "Text/javascript" >
var ary=new Array ();
Ary.push (New Stud ("1", "AAA", "N", "B"));
Ary.push (New Stud ("2", "AAA", "N", "B"));
Ary.push (New Stud ("3", "AAA", "N", "B"));
Ary.push (New Stud ("4", "AAA", "N", "B"));
Alert (ary[0].no+ "\ t" +ary[0].name);
var g_trobj;
function creattable () {
s= "<table border= ' 2px ' >";
Table header
s+= "<tr>" +
"<td width= ' 100px ' > </td>" +
"<td width= ' 100px ' >NO</td>" +
"<td width= ' 100px ' >NAME</td>" +
"<td width= ' 100px ' >AGE</td>" +
"<td width= ' 100px ' >SEX</td>" +
"<td width= ' 100px ' >FUNCTION</td>" +
"</tr>";
Contents of the Table
for (Var i=0;i<ary.length;i++) {
var u=ary[i];
s+= "<tr>";
s+= "<td><input type= ' checkbox ' name= ' T ' ></td>";
s+= "<td>" +u.no+ "</td>" +
"<td>" +u.name+ "</td>" +
"<td>" +u.age+ "</td>" +
"<td>" +u.sex+ "</td>" +
"<td><input type= ' button ' value= ' edit ' onclick= ' Tredit (this) ' > " +
"<input type= ' button ' value= ' delete ' onclick= ' del (This) ' ></td>";
s+= "</tr>";
}
Painting tail
s+= "<tr>" +
"<td colspan= ' 6 ' ><input type= ' button ' value= ' Selall ' onclick= ' al () ' > " +
"<input type= ' button ' value= ' Unselall ' onclick= ' Unsela () ' > ' +
"<input type= ' button ' value= ' SelA ' onclick= ' Delsel () ' ></td> ' +
"</tr>";
s+= "</table>";
var Obj=document.getelementbyid ("D1");
Obj.innerhtml=s;
}
var buobj=window.event.srcelement;
var tdobj=buobj.parentelement;
var trobj=td.parentelement;
Function del (e) {
for (Var i=0;i<trobj.length;i++) {
if (trobj[i]==buobj) {
Alert (trobj.cells[1]);
}
}
}
function Delsel () {
var checkobj=document.getelementsbyname ("T");
for (Var i=0;i<checkobj.length;i++) {
if (checkobj[i].checked==true) {//Selected
var e=checkobj[i];
var tdobj=e.parentelement;
var trobj=tdobj.parentelement; Find the selected TR line
alert (Trobj.cells[1].innertext);
}
}
}
Function Al () {
var checkobj=document.getelementsbyname ("T");
for (Var i=0;i<checkobj.length;i++) {
Checkobj[i].checked=true;
}
}
function Unsela () {
var checkobj=document.getelementsbyname ("T");
for (Var i=0;i<checkobj.length;i++) {
Checkobj[i].checked=false;
}
}
function Tredit (obj) {
var tdobj=obj.parentelement;
var trobj=tdobj.parentelement;
G_trobj=trobj;
var Dobj1=document.getelementbyid ("D1");
alert (Trobj.cells[1].innertext);
Dobj1.style.display= "None";
var Dobj2=document.getelementbyid ("D2");
Myno.value=g_trobj.cells[1].innertext;
Myname.value=g_trobj.cells[2].innertext;
Myage.value=g_trobj.cells[3].innertext;
Mysex.value= G_trobj.cells[4].innertext;
dobj2.style.display= "Block";
}
function UpdateRow () {
if (Confirm ("OK Update")!=true) {return;}
G_trobj.cells[1].innertext=myno.value;
G_trobj.cells[2].innertext=myname.value;
G_trobj.cells[3].innertext=myage.value;
G_trobj.cells[4].innertext=mysex.value;
var Dobj1=document.getelementbyid ("D1");
dobj1.style.display= "Block";
var Dobj2=document.getelementbyid ("D2");
Dobj2.style.display= "None";
}
function back () {
var Dobj1=document.getelementbyid ("D1");
dobj1.style.display= "Block";
var Dobj2=document.getelementbyid ("D2");
Dobj2.style.display= "None";
}
function Stud (no,name,age,sex) {
This.no=no;
This.name=name;
This.age=age;
This.sex=sex;
}
</script>
<body onload= "creattable ()" >
<div id= "D1" >
</div>
<div id= "D2" style= "Display:none" >
No: <input type= "text" id= "Myno" ><br/>
Name:<input type= "text" id= "MyName" ><br>
Age: <input type= "text" id= "MyAge" ><br>
Sex: <input type= "text" id= "Mysex" ><br>
<button type= "button" value= "Update" onclick= "UpdateRow (This)" > Update </button>
<button type= "button" value= "return" onclick= "Back ()" > Return </button>
</div>
</body>