Hola
Estoy tratando de hacer un ejemplo del libro DHTML y CSS avanzado de Jason Cranford y no me funciona.
Se supone que se presenta un atabla en pantalla y pinchando sobre el encabezado de cualquiera de sus columna, la tabla se ordena por esa columna.
Os dejo el código para ver si alguien me pued edecir dónde está el error
Gracias
archivo arrays.js
// 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'};
archivo tableSortLibrary.js:
// JavaScript Document
var sortBy=null;
function sortByOrderNum(a,b) {
return a.orderNum-b.orderNum;
}
function sortByGuestName(a,b) {
var stringA=a.guestNBame.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.innerHTM=arrayName[i].orderNum;
td=tr.insertCell(tr.cells.length);
td.setAttribute('class,`col2');
td.innerHTM_=arrayName[i].guestName;
td=tr.insertCell(tr.cells.length);
td.setAttribute('class','col3');
td.innerHTM=arrayName[i].politics;
}
}
archivo index.htm:
<!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" src="../javascript/arrays.js"></script>
<script language="javascript" type="text/javascript" src="../javascript/tableSortLibrary.js"></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>
