XMLデータを読み込んでテーブルに表示する

jQuery JavaScript 
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
(function($){
	$.loadXML = function(xmlPath, tableId){
		$.ajax({
			url: xmlPath + "?" + (new Date()).getTime(),
			type: "GET",
			dataType: "xml",
			timeout: 5000,
			error: function(){
				alert("XMLデータの読み込み中にエラーが発生しました。");
			},
			success: function(xml){
				tableId = "table#" + tableId;
				var table = $(tableId);

				$(tableId + " tr:gt(0)").remove();

				$(xml).find("books").find("data").each(function(){
					var id = $('<td  class="center">').html($(this).attr("id"));
					var name = $("<td>").html($(this).find("name").text());
					var size = $("<td>").html($(this).find("size").text());
					var supplement = $('<td  class="center">').html($(this).find("supplement").text());

					var tr = $("<tr>").append(id).append(name).append(size).append(supplement);

					table.append(tr);
				});

				tableRowColor("row-color");
			}
		});
	}
})(jQuery);
function tableRowColor(classNameTable, classNameEven, classNameOdd){
	var table;
	var children;
	var tables = document.getElementsByTagName("table");

	classNameEven = classNameEven ? classNameEven : "even";
	classNameOdd = classNameOdd ? classNameOdd : "odd";

	for(var i=0; table=tables[i]; i++){
		if(table.className.indexOf(classNameTable, 0) != -1){
			var row;
			var rows = table.getElementsByTagName("tr");

			for(var j=1; row=rows[j]; j++){
				if(j % 2 == 0){
					row.className = classNameEven;
				}else{
					row.className = classNameOdd;
				}
			}
		}
	}
}
$(function(){
$("a.filterAll").click(function(){
	$.loadXML("data/booksAll.xml", "books");
	return false;
});

$("a.filter01").click(function(){
	$.loadXML("data/books01.xml", "books");
	return false;
});

$("a.filter02").click(function(){
	$.loadXML("data/books02.xml", "books");
	return false;
});

tableRowColor("row-color");
});
</script>
<style type="text/css">
a {
	color: #00597f;
}
ul {
	list-style: none;
	padding: 0px;
	margin: 10px 0px 10px;
}
li {
	display: inline;
	font-size: 1.2em;
	margin-right: 10px;
}
li a {
	background: url(../images/arrow_right.gif) no-repeat 0px 4px;
	padding-left: 10px;
}
table {
	font-size: 1.2em;
	color: #454545;
	background-color: #cac9c9;
}
tr.header {
	color: #00597f;
	background-color: #e6eeee;
}
tr.odd {
	background-color: #fff;
}
tr.even {
	background-color: #f0f0f6;
}
th {
	padding: 4px 0px 3px 0px;
	border: solid 1px #fff;
}
td {
	padding: 5px 7px 4px 7px;
	border: solid 1px #fff;
}
td.center {
	text-align: center;
}
</style>
</head>
<body>
<h1>XMLデータを読み込んでテーブルに表示する</h1>
<ul>
	<li><a href="./index.html" class="filterAll">すべてを表示</a></li>
	<li><a href="./index.html" class="filter01">付録なしを表示</a></li>
	<li><a href="./index.html" class="filter02">付録ありを表示</a></li>
</ul>
<table id="books" class="row-color" border="0" cellspacing="1" cellpadding="0">
	<tr class="header">
		<th width="30">No.</th>
		<th width="210">雑誌名</th>
		<th width="110">サイズ</th>
		<th width="70">付録</th>
	</tr>
	<tr>
		<td class="center">1</td>
		<td>HTML</td>
		<td>352P</td>
		<td class="center">なし</td>
	</tr>
	<tr>
		<td class="center">2</td>
		<td>CSS</td>
		<td>160P</td>
		<td class="center">CD-ROM</td>
	</tr>
	<tr>
		<td class="center">3</td>
		<td>JavaScript</td>
		<td>192P</td>
		<td class="center">なし</td>
	</tr>
	<tr>
		<td class="center">4</td>
		<td>PHP</td>
		<td>176P</td>
		<td class="center">なし</td>
	</tr>
</table>
</body>
</html>