?
Solved

Sort HTML Table

Posted on 2004-10-05
2
Medium Priority
?
1,540 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

762 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