Hola titojorgiyo,
aqui lo tienes funcionando, basicamente habian errores sintacticos, que te listo a continuación:
var stringA=a.guestNBame.toLowerCase(); (la B sobra)
object=document.getElementById ("areaName"); (areaName es parametro y tu lo estas cogiendo como string)
td.innerHTML (te habias dejado la L) td.setAttribute('class','col2'); (faltaba una ' y habia un ´incorrecto)
<body onload="displayTable (guestList, 'table1');"> (estaba puesto con " con lo que cortabas la accion onload y daba error).
Y creo que ya está, el código correcto te lo pongo aqui:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script language="javascript" type="text/javascript">
// JavaScript Document
var guestList = new Array();
guestList[0]={orderNum:3, guestName:'Red Queen', politics:'Republican'};
guestList[1]={orderNum:5, guestName:'Blue Queen', politics:'Republican'};
guestList[2]={orderNum:1, guestName:'Irish Queen', politics:'Democrat'};
guestList[3]={orderNum:2, guestName:'Little Queen', politics:'Democrat'};
var sortBy=null;
function sortByOrderNum(a,b) {
return a.orderNum-b.orderNum;
}
function sortByGuestName(a,b) {
var stringA = a.guestName.toLowerCase();
var stringB = b.guestName.toLowerCase();
if (stringA>stringB) return 1;
if(stringA<stringB) return -1;
return 0;
}
function sortByPolitics(a,b) {
var stringA=a.politics.toLowerCase();
var stringB=b.politics.toLowerCase();
if(stringA>stringB) return 1;
if (stringA<stringB) return -1;
return 0;
}
function sortArray(arrayName,sortBy,areaName) {
if (sortBy=='orderNum') arrayName.sort (sortByOrderNum);
if (sortBy== 'guestName') arrayName.sort (sortByGuestName);
if (sortBy=='politics') arrayName.sort (sortByPolitics);
displayTable(arrayName,areaName);
}
function displayTable(arrayName,areaName) {
var tr;
var td;
object=document.getElementById(areaName);
while (object.rows.length>0) object.deleteRow(0)
for (var i=0; i<arrayName.length;i++) {
tr=object.insertRow(object.rows.length);
td=tr.insertCell(tr.cells.length);
td.setAttribute('class','col1');
td.innerHTML=arrayName[i].orderNum;
td=tr.insertCell(tr.cells.length);
td.setAttribute('class','col2');
td.innerHTML=arrayName[i].guestName;
td=tr.insertCell(tr.cells.length);
td.setAttribute('class','col3');
td.innerHTML=arrayName[i].politics;
}
}
</script>
<style type="text/css" media="screen">
<!--
th {
background-color:#d3d3d3;
text-align:left;
cursor:pointer;
border-top:1px solid #2f2f2f;
}
.col1, .col2, .col3 {
text-transform:capitalize;
padding:2px;
border-bottom:1px solid #2f2f2f;
}
.col1{
width:25px;
}
.col2 {
width:200px;
}
.col3 {
width:200px;
}
-->
</style>
</head>
<body onload="displayTable (guestList, 'table1');">
<p>Guest Seating List</p>
<p>Click a header to sort by that column</p>
<table border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="col1"><span onclick="sortArray(guestList, 'orderNum','table1')">#</span></th>
<th class="col2"><span onclick="sortArray(guestList,'guestName','table1') ">Name</span></th>
<th class="col3"><span onclick="sortArray(guestList,'politics','table1')" >Politics</span></th>
</tr>
</thead>
<tbody id="table1">
<!--Se rellena dinámicamente -->
</tbody>
</table>
</body>
</html>
Te recomiendo que utilices la consola de JavaScript que incorpora Firefox para visualizar los errores de Js, es muy util!
un saludo
