Solved

Sort HTML Table

Posted on 2004-10-05
2
1,527 Views
Last Modified: 2008-01-09
I'm trying to use the sort feature in this article: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude07232001.asp

This article explains how to highlight rows, sort rows and move columns. I have no problem with the highlight, but when I try to sort I get little white boxes under or beside my column headers and when I click to sort i get a runtime error telling me the column contents (the first row of the column contents) in undefined.

I wonder if my span tags are the problem.

Here is part of the code:

<table style="BEHAVIOR: url(sort.htc);BORDER-COLLAPSE: collapse" slcolor='#FFFFFF' hlcolor='#D0E4f7'
                  border="0" bordercolor="#111111" id="AutoNumber1" width="100%" cellpadding="0">
<THEAD>
                        <tr>
<% if not ReadOnlyActive then %>
<td width="25"><span style="PADDING-LEFT: 1px;  FONT-SIZE: 8pt;  OVERFLOW: visible;  COLOR: #0000ff;  FONT-FAMILY: Tahoma">Out</span></td>
<td width="35"><span style="PADDING-LEFT: 1px; FONT-SIZE: 8pt; OVERFLOW: visible; COLOR: #0000ff; FONT-FAMILY: Tahoma">Move</span></td>
<%end if %>
<td width="54"><span style="PADDING-LEFT: 1px; FONT-SIZE: 8pt; OVERFLOW: visible; COLOR: #0000ff; FONT-FAMILY: Tahoma">Carrier</span></td>

etc. to </THEAD>

<TBODY>
<tr>
<% if not ReadOnlyActive then %>
<td width="25" height="20"><a href="..\movementpages\movement.aspx?PageMode=Outbound&amp;TrailerSCAC=<%=rs.TrailerSCAC%>&amp;TrailerID=<%=rs.TrailerID%>" style="PADDING-LEFT: 1px; LEFT: 0.031in; OVERFLOW: hidden; WIDTH: 16px; CURSOR: hand; COLOR: #ff0000; TOP: 0in; HEIGHT: 16px">O*</a></td>
<td width="35" height="20"><a href="..\movementpages\movement.aspx?PageMode=Move&amp;TrailerSCAC=<%=rs.TrailerSCAC%>&amp;TrailerID=<%=rs.TrailerID%>" style="PADDING-LEFT: 1px; LEFT: 0.031in; OVERFLOW: hidden; WIDTH: 16px; CURSOR: hand; COLOR: #ff0000; TOP: 0in; HEIGHT: 16px">M*</a></td>
<%end if %>
<td width="54" height="20"><span style="PADDING-LEFT: 1px; FONT-SIZE: 8pt; OVERFLOW: visible; COLOR: black; FONT-FAMILY: Tahoma"><%=rs.CarrierSCAC%></span></td>
<td width="54" height="20"><span style="PADDING-LEFT: 1px; FONT-SIZE: 8pt; OVERFLOW: visible; COLOR: black; FONT-FAMILY: Tahoma"><%=rs.TrailerSCAC%></span></td>

etc. </TBODY>
0
Comment
Question by:jamesh1031
2 Comments
 

Expert Comment

by:__rdr__
ID: 12233230
I would copy the table and remove all style formatting and all scripts etc so its just a simple table.

Get the simple table working with the sorter then try applying the style and scripts to it
0
 
LVL 5

Accepted Solution

by:
pmsyyz earned 500 total points
ID: 12233231
Ignore that horrible article on Microsoft's site.  IE-only stuff hurts the Web.  There are plenty of standards compliant ways to sort tables that work in all browsers.  Here are a couple:

sorttable: Make all your tables sortable
http://www.kryogenix.org/code/browser/sorttable/

Sortable Table (WebFX)
http://webfx.eae.net/dhtml/sortabletable/sortabletable.html
simple demo: http://webfx.eae.net/dhtml/sortabletable/demo.html
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now