call a table with a input button command? And use array in a table? - JavaScript

JavaScript

Moderators: None (Apply to moderate this forum)

Number of threads: 1972
Number of posts: 5015

With full replies

Topics only

JavaScript

Forum Info

This Forum Only

Single Post View Linear View Threaded View

Printer Friendly

RSS Feed

call a table with a input button command? And use array in a table? Posted by Supersport on 7 Oct 2003 at 9:19 AM

Right now Iam working on a Students Data table. I made a button in my script but Iam not sure how you would make it so on click it would display my table? <input type= "button" Name="Grades Of all Students" onclick=
My other question is there away so that can I use StudentsData[0]from my array and put it in my table instead of typing <TD> 120</TD>. like document writIn (StudentsData[0]);

Here is my example code so Far
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
StudentsData = new Array (28);
StudentsData[0] = 120;
StudentsData[1] = 145;
StudentsData[2] = 234;
StudentsData[3] = 250;
StudentsData[4] = 278;
StudentsData[5] = 279;
StudentsData[6] = 300;
StudentsData[7] = "John Miller";
StudentsData[8] = "Cathy Johnson";
StudentsData[9] = "Bill Newton"
StudentsData[10] = "Jenny Bolton";
StudentsData[11] = "Bill Manson";
StudentsData[12] = "Kim Anderson";
StudentsData[13] = "Bob Newman";
StudentsData[14] = 84;
StudentsData[15] = 92;
StudentsData[16] = 63;
StudentsData[17] = 74;
StudentsData[18] = 99;
StudentsData[19] = 91;
StudentsData[20] = 77;
StudentsData[21] = "B";
StudentsData[22] = "A";
StudentsData[23] = "D";
StudentsData[24] = "C";
StudentsData[25] = "A";
StudentsData[26] = "A";
StudentsData[27] = "C";
<input type= "button" Name="Grades Of all Students" onclick=
</script>
</Head>
<body>
<TABLE BORDER="1">
<caption align="Top">This is the Students Data</caption>
<TR> <TH>Student Number <TH> Name <TH> Score <TH> Grade </TH> </TR>
<TR> <TD> 120</TD> <TD> John Miller</TD> <TD>84 </TD> <TD> B </TD> </TR>
<TR> <TD> 145</TD><TD>Cathy Johnson</TD> <TD> 92</TD> <TD> A </TD> </TR>
<TR> <TD> 234</TD> <TD> Bill Newton</TD> <TD>63 </TD> <TD> D </TD> </TR>
<TR> <TD> 250</TD><TD>Jenny Bolton</TD> <TD> 74</TD> <TD> C </TD> </TR>
<TR> <TD> 278</TD><TD>Bill Manson</TD> <TD> 99</TD> <TD> A </TD> </TR>
<TR> <TD> 279</TD> <TD> Kim Anderson</TD> <TD>91 </TD> <TD> A </TD> </TR>
<TR> <TD> 300</TD><TD>Bob Newman</TD> <TD> 77</TD> <TD> C </TD> </TR>
</TABLE>
</body>
</html>

Share By Email

Re: call a table with a input button command? And use array in a table Posted by Phazxero on 25 Oct 2003 at 3:39 PM

When I have "lots" of data like this, I usually create a class that defines the particular records...

function StudentData(num, name, score, grade) {
   this.StudentNumber = num;
   this.Name = name;
   this.Score = score;
   this.Grade = grade;
}

Then I will create an array of those records

var Records = new Array();   //Master record

//Function that add a student record to the array
function AddStudent(pNum, pName, pScore, pGrade) {
   Records[Records.length] = new StudentData(pNum, pName, pScore, pGrade);
}

//Add your students here
AddStudent(123, "Student Name", 100, "A");
AddStudent(124, "Student Name", 100, "A");
...

Then for the writing part, what i will do is shove everything in a DIV and then set the style:display = none...


var sHTML = '<div id="studentTable" style="display:none;">';
sHTML += '<table border="0" .... >';

//Iterate through the array to display the rows
for (var i=0; i<Records.length; i++) {
   sHTML += '<tr>';
   sHTML += '<td>' + Records[i].StudentNumber + '</td>';
   sHTML += '<td>' + Records[i].Name + '</td>';
   ....
   sHTML += '</tr>';
}

sHTML += '</table></div>';
document.write(sHTML);

Then for your button, use onclick="showTable()", which will basically change the display style of the DIV to "" (nothing, or showing it)
and here is showTable():

function showTable() {
   //This is where do will need to do some browser check.. which i don't remember very clearly
   //Here, studentTable is the id of the DIV we created earlier
   if (document.all) {
       document.all['studentTable'].style.display = "";
   }
   else if (document.getElementById) {
       document.getElementById('studentTable').style.display = "";
   }
   else {
       //not very sure about this one, it's for older browsers
       document.layers['studentTable']......
   }
}

I didn't test the script so i can't say 100% that it will work...

Good luck
Phazxero

Share By Email