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" οnclick="sortRow(0);"> </tbody> </table> <input type="text" id="id" /> <input id="add" type="button" value="Add" οnclick="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" οnclick="sortRow(0);"> </tbody> </table> <input type="text" id="id" /> <input id="add" type="button" value="Add" οnclick="addRow();" /> </div> </body> </html>