Adding Array elements into table

SilentQ-noob- · September 13, 2007

Hi,

I posted earlier about making a table which arranges its values alphabetically or numerically. I've found a table that does just that, but want to use my array elements instead of hard-coding the values.

My Code:

<body>
<script type="text/javascript">
myarray[0]=new Array();

myarray[0][0]="Col1";
myarray[0][1]="5";
myarray[0][2]="2";
myarray[0][3]="4";
myarray[0][4]="3";
myarray[0][5]="1";

myarray[1][0]="Col2";
myarray[1][1]="B";
myarray[1][2]="D";
myarray[1][3]="G";
myarray[1][4]="W";
myarray[1][5]="C";

myarray[2][0]="Col3";
myarray[2][1]="alpha";
myarray[2][2]="delta";
myarray[2][3]="bravo";
myarray[2][4]="gamma";
myarray[2][5]="india";

myarray[3][0]="Col4";
myarray[3][1]="yes";
myarray[3][2]="yes";
myarray[3][3]="no";
myarray[3][4]="no";
myarray[3][5]="yes";

</script>



<script type="text/javascript">




//sort alphabetically

function sortColumn(e){
var who=  e ? e.target : window.event.srcElement;
var pa = who.parentNode;
var T= pa,txt;
while(T.nodeName !='TABLE') T= T.parentNode;

var C= T.getElementsByTagName('caption')[0];
if(C)txt=who.title.replace('Sort','Sorted');	

T= T.getElementsByTagName('tbody')[0];
var A = pa.getElementsByTagName("th");
var L = A.length, count = 0;
while (A[count] != who) ++count;
do_colSort(count,T);

if(txt)C.firstChild.nodeValue= txt;
}

function do_colSort(count,T){
var R = T.getElementsByTagName("tr");
var L = R.length,RA=[], A = [], tem, funS;
for (var i = 0; i < L; i++){
	RA[i]=R[i];
	tem = R[i].getElementsByTagName("td")[count];
	A[i]= [i,tem.firstChild.nodeValue];
}
if(/\$/.test(A[0][1])){
	funS=function(a, b){
		a = parseFloat(a[1].replace(/\D+/g, ""));
		b = parseFloat(b[1].replace(/\D+/g, ""));
		return a - b;
	}
}
else{
	funS=function(a, b){
		a = a[1].toLowerCase();
		b = b[1].toLowerCase();
		if (a == b) return 0;
		if (a > b) return 1;
		return -1;
	}
}
A.sort(funS);
for (var i = 0; i < L; i++){
	tem=A[i][0];
	T.appendChild(RA[tem]);
}
}

onload=function(){
var t=document.getElementsByTagName('thead')[0];
if(t.className.indexOf('sortable')==-1) return;
t=t.getElementsByTagName('th');
var L=t.length,who;
for(var i=0;i<L;i++){
	who=t[i];
	if(who.className && /nosort/i.test(who.className)) continue;
	who.onclick=sortColumn;
	who.onmouseover=who.onfocus=function(e){e=e?e.target:window.event.srcElement;e.style.color='red'};
	who.onmouseout=who.onblur=function(e){e=e?e.target:window.event.srcElement;e.style.color=''};
	who.title='Sort by '+who.firstChild.nodeValue;
	who.tabIndex=1;	
	who.onkeypress=who.onclick;
}
var C= document.getElementsByTagName('caption')[0];
if(C)C.firstChild.nodeValue= 'Sort by column';
}




</script>

<style type="text/css">
body{font-size:120%;margin:1ex 1em;color:black;background:white;font-family:"Times New Roman", serif}
table{border:ridge black 3px;background-color:white;font-size:1.1em}
td,th{border:solid black 1px;padding:2px}
.sortableClass	th{cursor:pointer}
thead,tfoot{background-color:#eee;font-size:1.1em;font-weight:bold;text-align:center}
caption{font-weight:bold}

</style>
</head>
<body>
<h1>Test Table</h1>
<h2>Sort alphabetically</h2>
<div>
<table cellpadding="0" cellspacing="0" width="90%" summary="summary" id="myTable" >
<caption>Three Column Table</caption>
<thead class="sortableClass">
<tr>
<th width="25%" cols="1" >Col1</th>
<th width="25%">Col2</th>
<th width="25%">Col3</th>
<th width="25%">Col4</th>
</tr>
</thead>

[color=red]<tbody id="myTableBody">
<tr>
<td>1</td><td>B</td><td>alpha</td><td>yes</td>
</tr>
<tr>
<td>2</td><td>D</td><td>delta</td><td>yes</td>
</tr>
<tr>
<td>3</td><td>G</td><td>bravo</td><td>no</td>
</tr>
<tr>
<td>4</td><td>W</td><td>gamma</td><td>no</td>
</tr>
<tr>
<td>5</td><td>C</td><td>india</td><td>yes</td>
</tr>
[/color]
</tbody>
</table>
</div>



</script>



</body>
</html>

Right now the table looks the way I want, except the values in the table are hard-coded, and have nothing to do with my actual array.

mainewoods · September 17, 2007

you can do something like this:(first table row shown)

<td><script>document.write(myarray[0][1]);</script></td>
<td><script>document.write(myarray[1][1]);</script></td>
<td><script>document.write(myarray[2][1]);</script></td>
<td><script>document.write(myarray[3][1]);</script></td>

or just write out the whole tr using js:

<script type='text/javascript">
document.write('<td>' + myarray[0][1] + '</td><td>' + myarray[1][1] + '</td><td>' + myarray[2][1] 
+ '</td><td>' + myarray[3][1] + '</td>');
</script>

Sign In

Adding Array elements into table

Recommended Posts

SilentQ-noob-

Link to comment

Share on other sites

mainewoods

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information