JS CREATE table

Source: Internet
Author: User

<!--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 ' >&nbsp;</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) ' >&nbsp;" +
"<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 () ' >&nbsp;" +
"<input type= ' button ' value= ' Unselall ' onclick= ' Unsela () ' >&nbsp; ' +
"<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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.