Solved

Sort HTML Table

Posted on 2004-10-05
2
1,528 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 AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

770 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