Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

table sort

Status
Not open for further replies.
skiflyer

skiflyer

Programmer
Sep 24, 2002
2,213
US
Is there a way to make an html table a javascript object such that it can be sorted and the like without reloading the page?

-Rob
 
Sort by date Sort by votes
Very roughly you could do something like the following:

Store all the information in your table in a Javascript multi-dimensional array
In your HTML have your table within a <DIV></DIV> tags
When the user clicks on a column heading in your table, this will call a function which sorts your array by the chosen column, generates the table HTML on the fly and writes it to the DIV using the innerHTML property.

That should work. Mighty :)
 
Upvote 0 Downvote
Hi,
this script should set up a table for you using DOM ( sorry if there's typos as its untested ), all you really need to do is build each element of the table as an object. You can then use the insertBefore method to create it as below, or you could also use the swapNode or removeNode methods as well

<html><head></head>
<BODY ID=&quot;bodyNode&quot;>
<Script Language=&quot;JavaScript&quot;>
<!--
row1column1Obj = document.createTextNode(&quot;Row 1, column 1 &quot;);
tableObj = document.createElement(&quot;TABLE&quot;);
tbodyObj = document.createElement(&quot;TBODY&quot;);
tr1Obj = document.createElement(&quot;TR&quot;);
tr1td1Obj = document.createElement(&quot;TD&quot;);
tr1td2Obj = tr1td1Obj.cloneNode(false);
tr2td1Obj = tr1td1Obj.cloneNode(false);
tr2td2Obj = tr1td1Obj.cloneNode(false);
tr3td1Obj = tr1td1Obj.cloneNode(false);
tr3td2Obj = tr1td1Obj.cloneNode(false);
tr2Obj = tr1Obj.cloneNode(false);
tr3Obj tr1Obj.cloneNode(false);
row1column2Obj = row1column1Obj.cloneNode(false);
row2column1Obj = row1column1Obj.cloneNode(false);
row2column2Obj = row1column1Obj.cloneNode(false);
row3column1Obj = row1column1Obj.cloneNode(false);
row3column2Obj = row1column1Obj.cloneNode(false);
row1column2Obj.nodeValue = &quot;row 1, column 2&quot;;
row2column1Obj.nodeValue = &quot;row 2, column 1&quot;;
row2column2Obj.nodeValue = &quot;row 2, column 2&quot;;
row3column1Obj.nodeValue = &quot;row 3, column 1&quot;;
row3column2Obj.nodeValue = &quot;row 3, column 2&quot;;

returnValue = tableObj.insertBefore(tbodyObj);
tbodyObj.insertBefore(tr3Obj);
tbodyObj.insertBefore(tr2Obj, tr3Obj);
tbodyObj.insertBefore(tr1Obj, tr2Obj);

tr1Obj.insertBefore(tr1td2Obj);
tr1Obj.insertBefore(tr1td1Obj, tr1td2Obj);
tr2Obj.insertBefore(tr2td2Obj);
tr2Obj.insertBefore(tr2td1Obj, tr2td2Obj);
tr3Obj.insertBefore(tr3td2Obj);
tr3Obj.insertBefore(tr3td1Obj, tr3td2Obj);

tr1td2Obj.insertBefore(row1column2Obj);
tr1td1Obj.insertBefore(row1column1Obj);
tr2td2Obj.insertBefore(row2column2Obj);
tr2td1Obj.insertBefore(row2column2Obj);
tr3td2Obj.insertBefore(row3column2Obj);
tr3td1Obj.insertBefore(row3column1Obj);

bodyNode.insertBefore(tableObj);

// -->
</script></body></html>





 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
774
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
801
malpa
malpa
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
713
coldbohemia
coldbohemia
TheLazyPig
  • Locked
  • Question
Copy details of searched reference to table using Angular JS
Replies
0
Views
227
TheLazyPig
TheLazyPig

Part and Inventory Search

Sponsor

Back
Top