WebFX WebBoard
Message Thread:
View All Messages
Back to WebFX
 Sortabletable: Multi Table with Alternating Row Colors, Piggie, June 24, 2005
     Re:Sortabletable: Multi Table with Alternating Row Colors, albert, June 24, 2005
         Re:Sortabletable: Multi Table with Alternating Row Colors, piggie, June 25, 2005
     Re:Sortabletable: Multi Table with Alternating Row Colors, albert, June 24, 2005

Subject: Sortabletable: Multi Table with Alternating Row Colors From: Piggie Date: June 24, 2005

Hi,

I got a page with multiple tables. Question here, when sorting  one of the table, the alternate row color does not changes with the code as below:

<html>
...
var stbl = new Array();
...
<body>
<script>stbl[0]="stbl0";</script>
<table class=sort-table id=stbl0 width=100% cellpadding=5 cellspacing=0 border=0>
<thead>......</thead>
<tbody>
 <tr class=odd><td>aa</td></tr>
 <tr class=even><td>bb</td></tr>
</tbody>
</table>

<script>stbl[1]="stbl1";</script>
<table class=sort-table id=stbl1 width=100% cellpadding=5 cellspacing=0 border=0>
<thead>......</thead>
<tbody>
 <tr class=odd><td>aa</td></tr>
 <tr class=even><td>bb</td></tr>
 <tr class=odd><td>cc</td></tr>
</tbody>
</table>
....
  <script> 
function addClassName(el, sClassName) {
 var s = el.className;
 var p = s.split(" ");
 var l = p.length;
 for (var i = 0; i < l; i++) {
  if (p[i] == sClassName) return;
 }
 p[p.length] = sClassName;
 el.className = p.join(" ");
}
function removeClassName(el, sClassName) {
 var s = el.className;
 var p = s.split(" ");
 var np = [];
 var l = p.length;
 var j = 0;
 for (var i = 0; i < l; i++) {
  if (p[i] != sClassName) np[j++] = p[i];
 }
 el.className = np.join(" ");
}

for (i = 0; i < stbl.length; i ++ ){
 var st = new SortableTable(document.getElementById(stbl[i]),["None","Date","CaseInsensitiveString","String","Number","Date","None"]);
 st.onsort = function () {
  var rows = st.tBody.rows;
  var l = rows.length;
  for (var k = 0; k < l; k++) {
   removeClassName(rows[k], k % 2 ? "odd" : "even");
   addClassName(rows[k], k % 2 ? "even" : "odd");
  }
  };
}
</script>
</body>
</html>

When i try to alert the rows.length, it return the last table's row length. Is there any solution for this problem?

regards,

carol




Reply
Name: 
Email: 
Subject: 

Enter your reply to this message below. HTML tags are not supported but words that start with http://, ftp:// or mailto: are converted to links.


View All Messages
Back to WebFX