function addRow() {
var tb = $('tb');
with (document) {
var row = createElement("tr");
var td = createElement("td");
var txt = createTextNode($F("id"));
td.appendChild(txt);
row.appendChild(td);
tb.appendChild(row);
}
}
function sortRow(index) {
var tb = $('tb');
var trs = tb.getElementsByTagName('tr');
var tr1s = $A(trs);
tr1s.sort(function(t1, t2) {
var v1 = t1.getElementsByTagName('td')[index].firstChild.nodeValue
.strip();
var v2 = t2.getElementsByTagName('td')[index].firstChild.nodeValue
.strip();;
return v1.localeCompare(v2);
});
var flag = document.createDocumentFragment();
for (i = 0; i < tr1s.length; i++) {
flag.appendChild(tr1s[i]);
}
tb.appendChild(flag);
}
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030" /> <script type="text/javascript" src="js/prototype-1.6.0.3.js"> </script> <script type="text/javascript" src="js/table.js"> </script> </head> <body> <div id="d_body"> <table class="table"> <tbody id="tb" onclick="sortRow(0);"> </tbody> </table> <input type="text" id="id" /> <input id="add" type="button" value="Add" onclick="addRow();" /> </div> </body> </html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030" /> <script type="text/javascript" src="js/prototype-1.6.0.3.js"> </script> <script type="text/javascript" src="js/table.js"> </script> </head> <body> <div id="d_body"> <table class="table"> <tbody id="tb" onclick="sortRow(0);"> </tbody> </table> <input type="text" id="id" /> <input id="add" type="button" value="Add" onclick="addRow();" /> </div> </body> </html>