接着上一篇博文,解决上一篇博文最后遗留的瑕疵,同时,给表格列添加了排序功能。
解决掉的问题
1 乱码的问题
2 删除方法更加简便,省去获取父节点id的代码
3 点击第一行的add按钮后,下行table行变宽问题
<html> <head> <title>Table</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> table thead tr th { text-align : center, font-weight : bold } </style> </head> <body> <table id="tb1" border="1"> <thead> <tr> <th width="150px" onclick="sortTable()" style="cursor:pointer">First Name</th> <th width="150px">Last Name</th> <th width="130px"> </th> </tr> <thead> <tbody id="tb"> <tr id="1st"> <td width="150px"><input name="firstName" value="张" /></td> <td width="150px"><input name="firstName" value="三" ></td> <!-- 这里的两个input输入域和连接的 必须放置在一行,否则表格主体的第一行的两个按钮之间多一个空格--> <td width="130px"><input type="button" value="Add" onclick="add()"> <input type="button" value="Del" onclick="del(this)"></td> </tr> </tbody> </table> </body> </html> <script> function add() { // 创建table 行标签tr var trObj = document.createElement("tr"); // 设置行内容 trObj.innerHTML = "<td width='150px'><input name='firstName'/></td><td width='150px'>" + "<input name='lastName'/></td><td width='130px'><input type='button' value='Add' onclick='add()'> " + "<input type='button' value='Del' onclick='del(this)'></td>"; // 将行内容添加到表格中 document.getElementById("tb").appendChild(trObj); } function del(obj) { // 直接删除当前对象的父节点的父节点 document.getElementById("tb").removeChild(obj.parentNode.parentNode); } function compareTRs(oTR1, oTR2) { // 获取行中的需要比较的firstName列的值 var sValue1 = oTR1.firstElementChild.firstElementChild.value; var sValue2 = oTR2.firstElementChild.firstElementChild.value; // 进行比较 return sValue1.localeCompare(sValue2); } function sortTable(){ // 获取表格 var oTable = document.getElementById("tb1"); // 获取表格中tBody主体域 var oTBody = oTable.tBodies[0]; // 获取oTBody域中行集合 var colDataRows = oTBody.rows; // 新建行数组,用于存放行内容 var aTRs = new Array; // 将oTBody中的行内容添加到aTRs中 for (var i=0; i < colDataRows.length; i++) { aTRs[i] = colDataRows[i]; } // 若oTable的sortCol 属性为空,对数组进行反转,否则进行排序 if (oTable.sortCol) { aTRs.reverse(); } else { aTRs.sort(compareTRs); } // 创建代码片段,存放排序后的行数据 var oFragment = document.createDocumentFragment(); for (var i=0; i < aTRs.length; i++) { oFragment.appendChild(aTRs[i]); } // 将存放有排序后行数据的代码片段添加到表格主体oTBody上 oTBody.appendChild(oFragment); // 设置排序标识 oTable.sortCol = true; } </script>
原文地址:http://blog.csdn.net/magi1201/article/details/45070039