?
Solved

Sort HTML Table

Posted on 2004-10-05
2
Medium Priority
?
1,554 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 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

864 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