Javascript排序的问题

这个代码运行没有任何问题,在使用 书名,出版社,出版日期 这三项排序的时候首行显示为空后面的正常显示,只有使用最后一项定价排序的时候正常显示请问这是怎么回事
<!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=gb2312" />
<title>可以排序的图书列表</title>
<style type="text/css">
td{font-size:14px; font-family:"宋体"; vertical-align:bottom;}
thead{font-weight:bold;}
</style>
<script type="text/javascript">
<!--
function byName()
{
document.getElementById("myData1").Sort = "书名";
document.getElementById("myData1").Reset();
}
function byPubName()
{
document.getElementById("myData1").Sort = "出版社";
document.getElementById("myData1").Reset();
}
function byPubDay()
{
document.getElementById("myData1").Sort = "出版日期";
document.getElementById("myData1").Reset();
}
function byPrice()
{
document.getElementById("myData1").Sort = "定价";
document.getElementById("myData1").Reset();
}
//-->
</script>
</head><body>
<object id="myData1" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" border="0" width="0" height="0">
<param name="DataURL" value="data2.txt" />
<param name="UseHeader" value="True" />
</object>
<table border="1" id="myTable1" datasrc="#myData1">
<thead>
<tr>
<td onclick="byName();">书名</td>
<td onclick="byPubName();">出版社</td>
<td onclick="byPubDay();">出版日期</td>
<td onclick="byPrice();">定价</td>
</tr>
</thead>
<tbody>
<tr height="25px" valign="middle">
<td width="110px"><div datafld="书名"></div></td>
<td width="300px"><div datafld="出版社"></div></td>
<td width="300px"><div datafld="出版日期"></div></td>
<td width="300px"><div datafld="定价"></div></td>
</tr>
</tbody>
</table>
</body>
</html>
以下的内容保存为data2.txt书名,出版社,出版日期,定价
A,1,2007.3.1,30
B,2,2007.2.1,50
C,3,2007.1.1,70
D,4,2006.12.1,100
E,5,2006.11.1,67
F,6,2006.10.1,88
G,7,2006.9.1,98
H,8,2006.8.1,9
I,9,2006.7.1,15
J,10,2006.6.1,23