SilentQ-noob- Posted September 13, 2007 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/69244-adding-array-elements-into-table/ Share on other sites More sharing options...
mainewoods Posted September 17, 2007 Share Posted 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> Link to comment https://forums.phpfreaks.com/topic/69244-adding-array-elements-into-table/#findComment-349804 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.