populate-pages.js

<div>
<table id="cfps" class="sortable" 
       style="margin-top:200px;text-align:center;font-size:small">
<!-- filled by js --></table>
<script type="text/javascript" src="Papers/cfp.js"></script>
<script type="text/javascript">
fillCFPs("cfps");
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head";
sorter.asc = "asc";
sorter.desc = "desc";
sorter.even = "even";
sorter.odd = "odd";
sorter.evensel = "selected";
sorter.oddsel = "selected";
sorter.init("cfps",4);
</script>
</div>

// ---------------------------------------------------------------
// when ctable is a table holding data in rows
function fillCFPs(ctable) {
  // fill the table
   var r = new Array();
   var j = -1, k, l;
   var keys = cfps['fields'];
   var data = cfps['cfps'];
 
   r[++j] = '<style type="text/css">' + cfps['style'] + '</style>';

   r[++j] = '<thead>';
   for (k=0; k < keys.length; k++) {
       r[++j] = '<th>' + cfps['names'][k];
       r[++j] = '</th>'
   }
   r[++j] = '</thead><tbody>';
   for (k=0, size=data.length; k < size; k++){
       r[++j] = '<tr>';
       for (l = 0; l < keys.length; l++) {
          r[++j] ='<td id="' + keys[l] + '">';
          r[++j] = data[k][ keys[l] ] + '</td>';
       }
       r[++j] = '</tr>';
   }
   document.getElementById(ctable).innerHTML = (r.join('') + '</tbody>');
}

var cfps = {
    'style': '#short { width:80px;background-color:#A00000; color:#FFFFFF }'
        + '#long  { font-weight:bold; color:#901010; width:450px; text-align:left }'
        + '#abstract  { color:#808080 }'
        + '#location  { width:100px }'
        + '#remarks  { font-size:x-small; width:200px; text-align:left }'
        /* sorting stuff */
        + '.asc { background-color:#F99; } .desc { background-color:#FF9; }'
        + 'tr.even { background-color:#EEE; } tr.odd { background-color:#FEE; }'
        + '.selected { background-color:#DDD; }'
    ,'names': ['Short', 'Name', 'Event Date', 'Location',
              'Deadline', 'Abstract', 'Notification','Remarks'],
    'fields':['short', 'long', 'date', 'location',
              'deadline', 'abstract', 'notification', 'remarks'],
 'cfps' :
[{short:'EuroSys', long:'European Conf. on Computer Systems',
  deadline:'2014-10-03', 'abstract':'2014-09-26', notification:'',
  date:'2015-04-21',
  location:'Bordeaux, FR',
  remarks: 'large conf. (incl. workshops). Concurrency track?'}
  // ...
 ]}