La classe DataGrid
<script type="text/javascript">
function DataGrid(header, data) {
this._header = header;
this._data = data;
this._selectedIndex = [];
}
DataGrid.prototype.render = function(to) {
var table = document.createElement("TABLE");
table.style.border = "1px solid black";
table.style.borderCollapse = "collapse";
var thead = document.createElement("THEAD");
var trHead = document.createElement("TR");
for(var i = 0; i<this._header.length; i++) {
var th = document.createElement("TH");
th.appendChild(document.createTextNode(this._header[i]));
th.style.padding = "5px";
th.style.borderBottom = "1px solid black";
trHead.appendChild(th);
}
thead.appendChild(trHead);
table.appendChild(thead);
var tbody = document.createElement("TBODY");
for(var i = 0; i<this._data.length; i++) {
var trBody = document.createElement("TR");
trBody.onmouseover = this._onmouseover.setScope(this, trBody, i);
trBody.onmouseout = this._onmouseout.setScope(this, trBody, i);
trBody.onclick = this._onclick.setScope(this, trBody, i);
for(var c = 0; c<this._data[i].length; c++) {
var td = document.createElement("TD");
td.appendChild(document.createTextNode(this._data[i][c]));
td.style.padding = "5px";
trBody.appendChild(td);
}
tbody.appendChild(trBody);
}
table.appendChild(tbody);
to.appendChild(table);
}
DataGrid.prototype._onmouseover = function(tr, i) {
tr.style.background = "orange";
}
DataGrid.prototype._onmouseout = function(tr, i) {
if(this._selectedIndex.exists(i)) tr.style.background = "green";
else tr.style.background = "white";
}
DataGrid.prototype._onclick = function(tr, i) {
if(this._selectedIndex.exists(i)) this._ondeselect(tr, i);
else this._onselect(tr, i);
}
DataGrid.prototype._onselect = function(tr, i) {
tr.style.background = "green";
this._selectedIndex.push(i);
}
DataGrid.prototype._ondeselect = function(tr, i) {
tr.style.background = "white";
this._selectedIndex.remove(i);
}
DataGrid.prototype.getSelectedIndex = function() {
return this._selectedIndex;
}
DataGrid.prototype.getSelectedData = function() {
var temp = [];
for(var i = 0; i<this._selectedIndex.length; i++) temp.push(this._data[this._selectedIndex[i]]);
return temp;
}
</script>