In my phone book (of 613 multi-line entries in a table),  I am currently
'bolding' the names of the people, and leaving other fields 'unbolded'.

    Now, when a user decides to change the sorting order to street address,
I wish to 'unbold' the names, and bold the street addresses.

    So, is there a 'placeholder' HTML Element Tag that I can use for all
sortable fields (and later search for) so that the text is displayed
correctly but *unbolded*.

    I did a short test, and determined that undefined element tags (e.g.
<nobold>Hi There</nobold>) are (apparently) ignored and the text is
displayed correctly.  Does this happen (i.e., underfined element tags are
ignored) across all major browsers ??

    Then, when the user changes the sort order, I can 'bold' what needs to
be bolded, and 'unbold' the other fields (in this phone book).

Thanks !

--

Finding that rule only has to be done once and is most beautifully done in
conforming implementations of ECMAScript, 5.1 Edition (or emulations
thereof):

/* See also <http://PointedEars.de/scripts/dom/css.js> */

var findRules = (function () {
  var _slice = Array.prototype.slice;
  var a = [];
  var _concat = Array.prototype.concat;

  function toArray (obj)
  {
    return _slice.call(obj || a);
  }

  return function (selector, exactMatch) {
    var prefix = "(^|\\s)";
    if (exactMatch)
    {
      prefix = "^\\s*";
    }

    var rxSelector = new RegExp(
      prefix + selector.replace(/[$.(){}\[\]^]/g, "\\$&") + "\\s*$");

    var hits = toArray(document.styleSheets).map(
      function (styleSheet) {
        return toArray(styleSheet.cssRules || styleSheet.rules).filter(
          function (rule) {
            return rxSelector.test(rule.selectorText);
          });
      }).filter(function (hit) {
        return hit.length > 0;
      });

    return _concat.apply([], hits);
  };

if (!rulesets["people"])
{
  rulesets["people"] = findRules(".people", true);

Surely an emulation of a conforming implementation will itself be a
conforming implementation.

What subtle distinction were you trying to make?

    Thank you all for the tips/suggestions.

    I'll study them thoroughly.

OTOH, would <COL> serve?  For me, it does not alter the font; but the
tested (FF 12) following, which alters the background, may serve.
        <table border=1>
        <col><col style="background:cyan"><col>
        <tr><td>1<td>2<td>3</tr>
        <tr><td>4<td>5<td>6</tr>
        <tr><td>7<td>8<td>9</tr>
        </table>
To change columns, one needs only alter two entries in the DOM tree,
which should be possible.

You could class every element in the table with "X" + its row column
number, and alter the classes as needed.

    My phone book has two visible columns. Each column has 307 cells. Each
cell has 3 rows

    Each of the rows contains 5 <td> elements for each of the visible
columns.

    When the user 'clicks' a sorting button (for Name, for street address,
or for Lot No.), then the following javascript function is called:

    It is this next function that I would like to add (bolding/unbolding)
code to

    Denis McMahon is the original designer of this fone book. (and I made
several mods over the last year)

Thanks,

-Mel Smith

********************   one of the fone book table functions below

// build the table from the sorted data
function rebuildTable() {
  var theTable, theCells, i, r, baseRow;
  theTable = document.getElementById("theTable");
  for (i = 0; i < allData.length; i = i + 2) {
    baseRow = 2 + (4 * (i / 2)); // first 2 rows are header & spacer, then 4
rows for each 2 data records
    // left side data is allData[i];
    // right side data is allData[i+1];
    for (r = 0; r < 3; r = r + 1) { // don't worry about spacer rows, just
do data rows 0, 1, 2
      theCells = theTable.rows[baseRow + r].cells;
      if (r === 0) {
        theCells[0].innerHTML = allData[i].memName;    // would like to test
'unbolding' here when address below is bolded
        theCells[1].innerHTML = allData[i].editButt;
        theCells[3].innerHTML = allData[i + 1].memName;
        theCells[4].innerHTML = allData[i + 1].editButt;
      } else if (r === 1) {
        theCells[0].innerHTML = "<b>"+allData[i].localAddr+"</b>";  //
testing bolding here
        theCells[1].innerHTML = allData[i].lotNum;
        theCells[2].innerHTML = allData[i].localTel;
        theCells[4].innerHTML = "<b>"+allData[i + 1].localAddr+"</b>";
        theCells[5].innerHTML = allData[i + 1].lotNum;
        theCells[6].innerHTML = allData[i + 1].localTel;
      } else if (r === 2) {
        theCells[0].innerHTML = allData[i].otherAddr;
        theCells[1].innerHTML = allData[i].otherTel;
        theCells[3].innerHTML = allData[i + 1].otherAddr;
        theCells[4].innerHTML = allData[i + 1].otherTel;
      }
    }
  }

The way I think I would do it, assuming that each row has a series of td
elements ....

To the td elements that contain names, I would add 'class="name"', and to
the td elements that hold addresses, I would add 'class="addr"'

Then, as an appendage to the sort routines, call something like boldCells
as shown below with either "name" or "addr" (it can be expanded to other
fields if needed):

function boldCells( embolden ) {
  var cells = document.getElementsByTagName( "td" );
  var ix = cells.length;
  var cell, class;
  while ( ix-- ) {
    cell = cells.item( ix );
    class = cell.attributes.getNamedItem( "class" );
    if ( class.indexOf( "name" ) != -1 ) {
      if ( embolden == "name" )
        cell.style.fontWeight = "bold";
      else
        cell.style.fontWeight = "normal";
    }
    else if ( class.indexOf( "addr" ) != -1 ) {
      if ( embolden == "addr" )
        cell.style.fontWeight = "bold";
      else
        cell.style.fontWeight = "normal";
    }

Basically, boldCells will look at all the td cells in the document for
any with one of the defined class attributes, and apply either bold or
normal font-weight to each of the matching cells depending on whether the
cell's actual class matches the one passed to the boldCells function.
Cells which don't match any of the defined cell classes won't be affected
at all, so if they are bold they will stay bold, and if they are not bold
they will remain not bold.

Rgds

I would put all data in a database and build the differently sorted
phonebook from scratch after each sort-request.

=======

Serverside?

Preferably I would do this serverside, as serverside there are much more
elaborate options of database sorting, and either renew the html-page on
every sort-request, or get the content with an Ajax call.

=======

Clientside?

However you could do all this with clientside javascript using objects
and/or arrays as a database, and rebuilding the table-system with
javascript DOM-functions.
Even then index-arrays for the different sort-options could be prepared
serverside, if the phonebook is clientside-static.

=======

table1.style.display = 'none';
table2.style.display = 'block';

If you have only 2 sort-options you could build 2 table-systems of which
only one is displayed at a time, switchable with an onclick in the table
header. Diffferent bolding and colouring of columns is even simpler then.

--

As result, this code does not compile, and does not run.  For example, in
Chromium 18.x:

| > var class = 42;
| SyntaxError: Unexpected reserved word

  cells[ix]

instead.

<http://www.w3.org/TR/DOM-Level-2-HTML/ecma-script-binding.html>

  cell.className

does it all, and is a lot more compatible than your bloatcode (even the
equally bloated and equally wrong cell.getAttribute("class") is more
efficient than that).

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037>

We have already discussed here ad nauseam how to determine efficiently and
reliably if a CSS class name is in a `class' attribute value.  For those who
have not been paying attention, or are new here, the consensus reached in
those discussions was:

  if (/(^|\s)name(\s|$)/.test(cell.className))
  {
    …
  }

[`\b' as delimiter does not suffice, because (CSS) class names may contain
non-ASCII characters, which are considered non-word characters.  `\s' should
suffice but does not match HTML's white-space definition exactly in all
implementations; so a custom character class might be used instead.]

<http://www.w3.org/TR/1999/REC-html401-19991224/struct/
 global.html#adef-class>

  foo.className = "bold";

    To add more fuel to the fire, here are two rows of fone book entries.

    I have obscured information by changing some onfo, but this is out of
the current phone book.

    (Anyway, will look more over the suggestions and flames above, and
decide what to do.)

Thanks to all !

-Mel Smith

    Will look carefully at the suggestions above, and test the
implementation.

    btw, your design has worked flawlessly over the past year, and the
residents of my Senior's Park, and the office lady really appreciate your
work.

Thanks you very much !

|    theCells[0].innerHTML = allData[i].memName;
|    theCells[1].innerHTML = allData[i].editButt;
|    theCells[3].innerHTML = allData[i + 1].memName;
|    theCells[4].innerHTML = allData[i + 1].editButt;

   -- from <a18cc2Fb0...@mid.individual.net>
      also found at http://groups.google.com/group/comp.lang.javascript/msg/9023984143f368ed

If you were to find a way to group all your DOM-related changes, you
might not have that sort of slow speed.

Scott:

    I have sent to your email address (....@gmail.com) the latest fone book
page for your perusal.

    You should be able to test it at your location.

Thanks for your interest.

You might like to consider whether you are using bubblesort, and if so
look for something quicker.  Try duplicating your data to 1226 entries;
of the sort now takes sixteen seconds, it's unnecessarily slow.
Otherwise, are you repeatedly swapping relatively large items?  If so,
you might do better by sorting an array of index to item, in which the
indexes only are swapped.

    Scott Sauyet said this morning that running *my* page on *his* machine
took less than a second ????

    I'll look into why *my* clicking on one of the Sort buttons took nearly
4 secs to complete the sort, and then bold the new sort key. Hmmmm ...

    (btw, I use Win XP Pro (sp3), and  Pentium 5 , 1.80 GHz with 1.99 GB of
RAM  ).

But I don't recall what browsers you and Scott Sauyet are using.  That
can make a very considerable difference.

I tested the page Mel emailed me on my WinXP machine (dual 2.5 GHz
processors, 3GB RAM) on recent versions of Chrome, Firefox, Safari,
and Opera, as well as IE8, IE6, and IE5.01.  On IE6 and IE8, the sort/
rebuild process took about 1.5 seconds.  On all the others, it was
well below half a second.

I didn't bother loading up my Linux partition; it's generally just a
little faster than the Windows one at tasks like this.

    function cmpNameAsc(x, y) {
      if (x.mem === y.mem) return 0;
      return (x.mem > y.mem) ? 1 : -1;
    }

    // ... elsewhere ...

    allData.sort(cmpNameAsc);

The members of the array `allData` are fairly simple objects created
from a constructor function.  Their fields are scraped at startup from
a fairly large table.  But the actual sort is a standard array sort.
I've never looked, but I assume that the standard sort is either a
mergesort or a quicksort.  In either case, the sort is almost
certainly not the culprit.

But after that sort, the table is updated by individually setting the
innerHTML on each cell.  I'm guessing that most of the time Mel is
seeing is in that process.

AISB, the biggest issue is almost certainly the way the content is
loaded one bit a time back into the table.

I tested the page Mel emailed me on my WinXP machine (dual 2.5 GHz
processors, 3GB RAM) on recent versions of Chrome, Firefox, Safari,
and Opera, as well as IE8, IE6, and IE5.01.  On IE6 and IE8, the sort/
rebuild process took about 1.5 seconds.  On all the others, it was
well below half a second.

    I (Mel) tested on my IE7 browser, and *my error*:  my time was approx
*2.5 seconds*  (Not 4 secs) from:  Clivking the 'Sort' Button thru the
following sequences:

        a.    Unbolding the 'previous' bolded fields
        b.    Sorting the data fields on the new sort key
        c.    Rebuilding the table
        d.    Bolding the new bold sort fields
        e.    Informing the user of the new Sort Field

I didn't bother loading up my Linux partition; it's generally just a
little faster than the Windows one at tasks like this.

The page Mel supplied included a fair bit of sensitive customer data,
which, I assume is why he hasn't posted simpler versions anywhere.
But there is nothing sensitive about the sorting routines, and they
are simple and appropriate:

Scott:
    Yes, because I have personal info on 613 residences, I feel obliged to
restrict access to the internal data

    function cmpNameAsc(x, y) {
      if (x.mem === y.mem) return 0;
      return (x.mem > y.mem) ? 1 : -1;
    }

    // ... elsewhere ...

    allData.sort(cmpNameAsc);

The members of the array `allData` are fairly simple objects created
from a constructor function.  Their fields are scraped at startup from
a fairly large table.  But the actual sort is a standard array sort.
I've never looked, but I assume that the standard sort is either a
mergesort or a quicksort.  In either case, the sort is almost
certainly not the culprit.

But after that sort, the table is updated by individually setting the
innerHTML on each cell.  I'm guessing that most of the time Mel is
seeing is in that process.

Scott:

    Did another test:
    Chrome 19.0.1084.46 took less than a second !
    FireFox 12.0 took approx 1.5 seconds.
    IE7 took approx 2 seconds

Sorry to have led you astray.

The code shown will almost half of the time do one comparison, whereas
comparing first with 0 will almost always do two comparisons.

The difference made to the overall time will be small but possibly
measurable; and it may be browser-dependent.

if the === false and the == is true,
you would end up with returning -1,
not so useful.