emacs-wiki-discuss
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[emacs-wiki-discuss] Striped Tables (from Ephrem)


From: Sandra Jean Chua
Subject: [emacs-wiki-discuss] Striped Tables (from Ephrem)
Date: Thu, 15 Apr 2004 10:47:50 -0400
User-agent: Internet Messaging Program (IMP) 4.0-cvs

ephrem AT tuirgin.com wrote:
----------------------------------------------------------------

Here's a bit of magic to make fancy striped tables. The javascript is from
http://alistapart.com/articles/zebratables/. 4 steps. One caveat, if you have
multiple tables on a page (not including headers and footers) this 
could result
in multiple instances of id="tabular". If anyone knows how to adapt the
javascript to identify class instead of id, that would be an improvement.

1) Edit emacs-wiki-publishing-header and add this javascript somewhere within
the head tag:

    <script type=\"text/javascript\">
    <!--
      // this function is need to work around
      // a bug in IE related to element attributes
      function hasClass(obj) {
         var result = false;
         if (obj.getAttributeNode(\"class\") != null) {
             result = obj.getAttributeNode(\"class\").value;
         }
         return result;
      }

     function stripe(id) {
        // the flag we'll use to keep track of
        // whether the current row is odd or even
        var even = false;

        // if arguments are provided to specify the colours
        // of the even & odd rows, then use the them;
        // otherwise use the following defaults:
        var evenColor = arguments[1] ? arguments[1] : \"#fff\";
        var oddColor = arguments[2] ? arguments[2] : \"#eee\";

        // obtain a reference to the desired table
        // if no such table exists, abort
        var table = document.getElementById(id);
        if (! table) { return; }

        // by definition, tables can have more than one tbody
        // element, so we'll have to get the list of child
        // &lt;tbody&gt;s
        var tbodies = table.getElementsByTagName(\"tbody\");

        // and iterate through them...
        for (var h = 0; h < tbodies.length; h++) {

         // find all the &lt;tr&gt; elements...
          var trs = tbodies[h].getElementsByTagName(\"tr\");

          // ... and iterate through them
          for (var i = 0; i < trs.length; i++) {

            // avoid rows that have a class attribute
            // or backgroundColor style
            if (!hasClass(trs[i]) && ! trs[i].style.backgroundColor) {

             // get all the cells in this row...
              var tds = trs[i].getElementsByTagName(\"td\");

              // and iterate through them...
              for (var j = 0; j < tds.length; j++) {

                var mytd = tds[j];

                // avoid cells that have a class attribute
                // or backgroundColor style
                if (! hasClass(mytd) && ! mytd.style.backgroundColor) {

                      mytd.style.backgroundColor = even ? evenColor : oddColor;

                }
              }
            }
            // flip from odd to even, or vice-versa
            even =  ! even;
          }
        }
      }
    // -->
    </script>



2) Edit emacs-wiki-publishing-header so that the body tag has an
    onload attribute as follows:

    <body onload=\"stripe('tabular', '#fff', '#edf3fe');\">



3) Edit emacs-wiki-table-attributes so that it includes
    id="tabular":

    (setq emacs-wiki-table-attributes "id=\"tabular\" border=\"0\"
cellpadding=\"2\" cellspacing=0")




4) Add something like the following to your stylesheet:

    /*
    // Only tables with the "tabular" id, thereby avoiding header
    // and footer tables.
   */

    table#tabular {
        border: 3px solid #555;
    }


    /*
    // Apply border to all td elements which are not in the first row.
    */

    table#tabular tr + tr>td {
        border-top: 1px solid #aaa;
    }

    table#tabular td {
        padding: .5ex .5em;
    }


    /*
    // Apply left border to all columns except the first.
    */

    table#tabular td + td {
        border-left: 1px dotted #aaa;
    }





reply via email to

[Prev in Thread] Current Thread [Next in Thread]