<HTML>
<HEAD>
<SCRIPT>
function Table (tBody, tHead) {
  this.tBody = tBody;
  this.tHead = 
    tHead.constructor == Array ? tHead : new Array();
  this.view = null;
}
function Table_sort (compFun, col) {
  compFun = compFun || compRows;
  compFun.col = col ? col : 0;
  this.tBody.sort(compFun);
  if (this.view)
    this.view.update();
}
Table.prototype.sort = Table_sort;
function compRows (row1, row2) {
  var sortCol = compRows.col;
  var value1 = row1[sortCol];
  var value2 = row2[sortCol];
  return value1 < value2 ? -1 : 
    value1 == value2 ? 0 : 1;
}
function compRowsNum (row1, row2) {
  var sortCol = compRowsNum.col;
  var value1 = parseFloat(row1[sortCol]);
  var value2 = parseFloat(row2[sortCol]);
  return value1 < value2 ? -1 : 
    value1 == value2 ? 0 : 1;
}
function TableView (model, left, top) {
  this.id = TableView.cnt;
  TableView.views[TableView.cnt++] = this;
  this.model = model;
  this.model.view = this;
  this.left = left || 0;
  this.top = top || 0;
  this.writeLayer();
}
function TableView_writeLayer () {
  var html = '';
  html += '<STYLE>';
  html += '#tableView' + this.id + ' {';
  html += ' position: absolute;';
  html += ' left: ' + this.left + 'px;';
  html += ' top: ' + this.top + 'px';
  html += '}';
  html += '<\/STYLE>';
  html += '<DIV ID="tableView' + this.id + '"';
  html += '>';
  html += this.getHTML(this.model);
  html += '<\/DIV>';
  document.write(html);
  if (document.all)
    this.layer = document.all['tableView' + this.id];
  else if (document.layers)
    this.layer = document['tableView' + this.id];
  else if (document.getElementById)
    this.layer = document.getElementById('tableView' + this.id);
}
TableView.prototype.writeLayer = TableView_writeLayer;
function TableView_update () {
  var html = this.getHTML();
  if (document.layers) {
    if (!this.layer)
      this.layer = document['tableView' + this.id];
    this.layer.document.open();
    this.layer.document.write(html);
    this.layer.document.close();
  }
  else if (document.all)
    this.layer.innerHTML = html;
  else if (document.createRange) {
    var r = document.createRange();
    if (!this.layer)
      this.layer = document.getElementById('tableView' + this.id);
    while (this.layer.hasChildNodes())
      this.layer.removeChild(this.layer.lastChild);
    r.setStartAfter(this.layer);
    var docFrag = r.createContextualFragment(html);
    this.layer.appendChild(docFrag);
  }
}
TableView.prototype.update = TableView_update;
function TableView_getHTML () {
  var tHead = this.model.tHead;
  var rows = this.model.tBody;
  var html = '';
  html += '<TABLE border=1>';
  for (var r = 0; r < tHead.length; r++) {
    html += '<TR>';
    for (var c = 0; c < tHead[r].length; c++) {
      html += '<TH>'
      html += tHead[r][c];
      html += '<\/TH>';
    }
    html += '<\/TR>';
  }
  for (var r = 0; r < rows.length; r++) {
    html += '<TR>';
    for (var c = 0; c < rows[r].length; c++) {
      html += '<TD>'
      html += rows[r][c];
      html += '<\/TD>';
    }
    html += '<\/TR>';
  }
  html += '<\/TABLE>';
  return html;
}
TableView.prototype.getHTML = TableView_getHTML;
TableView.cnt = 0;
TableView.views = new Array();
</SCRIPT>
<SCRIPT>
var tHead = [
  [
'<A HREF="javascript: void 0" ONCLICK="table1.sort(); ' +
'return false;">姓名<\/A>', 
   '<A HREF="javascript: void 0" ONCLICK="table1.sort(null, 1); ' 
+ 'return false;">课程<\/A>',
   '<A HREF="javascript: void 0" ONCLICK="table1.sort(compRowsNum, 2);' 
+ ' return false;">分数<\/A>']];
var tBody = [['Meng', '语文', 100],
  ['孟子', '外语', 99],
  ['小孟', '数学', 300]
];
var table1 = new Table(tBody, tHead);
var table1View;
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
table1View = new TableView (table1, 100, 100);
</SCRIPT>
</BODY>
</HTML>