httemplate/elements/columnstart.html

   1 <%doc>
   2 <table>
   3   <& /elements/columnstart.html &>
   4     <tr> ... </tr>
   5     <tr> ... </tr>
   6   <& /elements/columnnext.html &>
   7     ...
   8   <& /elements/columnend.html &>
   9 </table>
  10
  11 Pass 'aligned' => 1 to have corresponding rows in the columns line up.
  12 </%doc>
  13 % my $id = sprintf('table%08d', random_id(8));
  14 <TR>
  15   <TD CLASS="background" COLSPAN=99>
  16     <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 id="<%$id%>">
  17       <TR>
  18         <TD VALIGN="top">
  19           <TABLE BGCOLOR="#cccccc" BORDER=0 CELLSPACING=0>
  20 % if ( $aligned ) {
  21 %# Instead of changing all the tr-* elements to sometimes output table
  22 %# cells without wrapping them in a row, we're just going to completely
  23 %# rebuild the table on the client side.
  24 <script type="text/javascript">
  25 <&| onload.js &>
  26   var table = document.getElementById('<%$id%>'); // has one row, always
  27   var rows = []; // row contents, each containing
  28   var n_rows = []; // rows in each subtable
  29   var n_cols = []; // cols in each subtable
  30   var total_rows = 0; // max(n_rows)
  31   for(var i=0; i < table.rows[0].cells.length; i++) {
  32     // these are cells created by columnstart/columnnext
  33     // each contains a table, and nothing else
  34     var subtable = table.rows[0].cells[i].children[0];
  35     n_rows[i] = subtable.rows.length;
  36     if ( total_rows < n_rows[i] ) {
  37       total_rows = n_rows[i];
  38     }
  39     n_cols[i] = 0;
  40     var subrows = []; // the rows of this table
  41     for(var j=0; j < n_rows[i]; j++) {
  42       // these are the actual tr-* rows within the table, and
  43       // can contain multiple cells
  44       subrows[j] = [];
  45       var tr = subtable.rows[j];
  46       if ( n_cols[i] < tr.cells.length ) {
  47         n_cols[i] = tr.cells.length;
  48       }
  49       for(var k=0; k < tr.cells.length; k++) {
  50         subrows[j][k] = tr.cells[k];
  51       }
  52     } // for(j)
  53     rows[i] = subrows;
  54   } // for(i)
  55   var new_table = document.createElement('TABLE');
  56   for (var j = 0; j < total_rows; j++) {
  57     var tr = document.createElement('TR');
  58     for (var i = 0; i < rows.length; i++) { // subtables
  59       var k = 0; // subrow position
  60       if ( j < n_rows[i] ) { // then subtable i has this row
  61         for (k = 0; k < rows[i][j].length; k++) { // cells
  62           tr.appendChild(rows[i][j][k]);
  63         }
  64       } // else k is just 0
  65       if ( k < n_cols[i] ) { // then we need a spacer
  66         var spacer = document.createElement('TD');
  67         spacer.setAttribute('colspan', n_cols[i] - k);
  68         tr.appendChild(spacer);
  69       }
  70     } // for(i); subtables
  71     // tr is complete
  72     new_table.appendChild(tr);
  73   } // for(j); rows
  74   table.parentNode.insertBefore( new_table, table );
  75   table.parentNode.removeChild(table);
  76 </&>
  77 </script>
  78 % } # if $aligned
  79 <%args>
  80 $aligned => 0
  81 </%args>