<!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" />
<script type="text/javascript" src="061/xml.js"></script>
<style type="text/css">
.tblStyle
{
border-collapse:collapse;
background:#FFF;
border-top:#000 1px solid;
border-bottom:#000 1px solid;
border-left:#000 0px solid;
border-right:#000 0px solid;
}
.tblStyle th
{
background:#FF9;
text-align:left;
border-bottom:#000 1px solid;
}
.tblStyle td
{
border-collapse:collapse;
border-top:#000 1px solid;
}
</style>
<script type="text/javascript">
<!--
var xmlHttp;
function createXHR(){
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (!xmlHttp) {
alert('浏览器不支持 XMLHTTP ');
return false;
}
}
function sendRequest(sort){
createXHR();
var url='061-sort.asp?sort='+sort+'&ts='+new Date().getTime();
xmlHttp.open('GET',url,true);
xmlHttp.onreadystatechange=catchResult;
xmlHttp.send(null);
}
function catchResult(){
if (xmlHttp.readyState==4){
if (xmlHttp.status == 200) {
sortTable(xmlHttp.responseXML);
}else{
alert('代码错误:'+xmlHttp.status+'/('+xmlHttp.statusText+'/)');
}
}
}
function sortTable(xmldoc){
var oldobj=document.getElementById('tbl');
var parentDiv=oldobj.parentNode;
var tblObj=document.createElement('table');
var tbody=document.createElement('tbody');
tblObj.setAttribute('width','100%');
tblObj.setAttribute('border','1');
tblObj.setAttribute('cellpadding','2');
tblObj.setAttribute('cellspacing','1');
tblObj.setAttribute('id','tbl');
tblObj.className='tblStyle';
var tblhead=document.getElementById('tblhead');
tbody.appendChild(tblhead);
var na=getNodeContent(xmldoc,'product');
for (var i=0;i<na.length;i+=4){
var row=document.createElement('tr');
for (var j=0;j<4;j++){
var cell=document.createElement('td');
var cellText=document.createTextNode(na[i+j][1]);
cell.appendChild(cellText);
row.appendChild(cell);
}
tbody.appendChild(row);
}
tblObj.appendChild(tbody);
parentDiv.replaceChild(tblObj,oldobj);
}
function headRow(){
}
//-->
</script>
</head>
<body onload="sendRequest();">
<h3>AJAX 表格字段数据排序</h3>
<p>表格字段数据排序的方法很多，本例，通过 AJAX 技术，把排序的工作交给服务器来执行，浏览器端只负责显示结果。</p>
<div class="br"><div class="bl"><div class="bt"><div></div></div>
<div>
<table width="100%" border="1" cellpadding="2" cellspacing="1" >http://www.corange.cn/archives/2010/02/3528.html