javascript学习笔记—表格的动态添加、删除，表格排序
本篇功能不完善，请点击另一篇文章：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>
<script type="text/javascript">
//添加一行数据
function addRow(){
var newRow = tab.insertRow(tab.rows.length); //添加一行
var countCell=tab.rows.item(0).cells.length; //获得指定行的列的长度
for(var i=0;i<countCell;i++){
var r = prompt("请输入第"+(i+1)+"列的值：","");
if(r != null){
var newCell = newRow.insertCell(i);
newCell.innerHTML = r;
}
}
}
//删除一行数据
function deleteRow(){
var n = prompt("请输入要删除行的下标","");
if(n != null){
tab.deleteRow(n); //删除指定的一行
}
}
//转换数据类型,v为值，dataType为数据类型
function convert(v,dataType){
switch(dataType){
case "int":
return parseInt(v);
case "date":
return new Date(Date.parse(v));
default:
return v.toString();
}
}
//排序函数,index为索引，type为数据类型
function pai(index,dataType){
return function compare(a,b){
//var str1 = convert(a.cells[index].firstChild.nodeValue,dataType);
//var str2 = convert(b.cells[index].firstChild.nodeValue,dataType);
var str1 = convert(a.cells[index].innerHTML,dataType); //两种方法效果一样
var str2 = convert(b.cells[index].innerHTML,dataType);
if(str1 < str2){
return -1;
}else if(str1 > str2){
return 1;
}else{
return 0;
}
};
}
//排序的过程
function sortTable(tableID,index,dataType){
var tab = document.getElementById(tableID); //获取表格的ID
var td = tab.tBodies[0]; //获取表格的tbody
var newRows = td.rows; //获取tbody里的所有行
var arr = new Array(); //定义arr数组用于存放tbody里的行
//用循环将所有列放入数组
for(var i=0;i<newRows.length;i++){
arr[i] = newRows[i];
}
//判断最后一次排序的列是否与现在要进行排序的列相同，如果是就反序排列
if(tab.sortCol == index){
arr.reverse();
}else{
//使用数组的sort方法，传进排序函数
arr.sort(pai(index,dataType));
}
var oFragment = document.createDocumentFragment(); //创建文档碎片
for (var i=0; i < arr.length; i++) { //把排序过的aTRs数组成员依次添加到文档碎片
oFragment.appendChild(arr[i]);
}
td.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新
tab.sortCol = index; //记录最后一次排序的列索引
}
</script>
</head>
<body>
<input type="button" value="添加数据" onClick="addRow()" />
<input type="button" value="删除数据" onClick="deleteRow()" />
<table id="tab" border=1>
<thead> <!--以下数据，纯属瞎掰，无需在意-->
<tr>
<th onClick="sortTable('tab',0,'int')" style="cursor:pointer">ID</th>
<th onClick="sortTable('tab',1)" style="cursor:pointer">姓名</th>
<th onClick="sortTable('tab',2,'int')" style="cursor:pointer">年龄</th>
<th onClick="sortTable('tab',3,'date')" style="cursor:pointer">出生日期</th>
</tr>
</thead>
<tbody>
<tr>
<td width=100 id="ID">1</td>
<td id="name" width="100">ss</td>
<td id="age" width="100">25</td>
<td id="date" width="100">1970/09/09</td>
</tr>
<tr>
<td width=100 id="ID">3</td>
<td id="name" width="100">mm</td>
<td id="age" width="100">18</td>
<td id="date" width="100">1980/09/09</td>
</tr>
<tr>
<td width=100 id="ID">2</td>
<td id="name" width="100">jj</td>
<td id="age" width="100">19</td>
<td id="date" width="100">1990/09/09</td>
</tr>
<tr>
<td width=100 id="ID">6</td>
<td id="name" width="100">gg</td>
<td id="age" width="100">22</td>
<td id="date" width="100">1965/09/09</td>
</tr>
<tr>
<td width=100 id="ID">5</td>
<td id="name" width="100">ff</td>
<td id="age" width="100">30</td>
<td id="date" width="100">1950/09/09</td>
</tr>
</tbody>
</table>
</body>
</html>
<!--函数分析
document.createDocumentFragment()说白了就是为了节约使用DOM。
每次JavaScript对DOM的操作都会改变页面的变现，并重新刷新整个页面，
从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，
然后把文档碎片的内容一次性添加到document中.
appendChild() 方法：可向节点的子节点列表的末尾添加新的子节点。语法：appendChild(newchild)
insertBefore() 方法：可在已有的子节点前插入一个新的子节点。语法 ：insertBefore(newchild,refchild)
表格的ID.cells[索引].firstChild.nodeValue 可以获得表格中的值
表格的ID.cells[索引].innerHTML 效果同上
style="cursor:pointer" 把鼠标指针切换为手指
var arr = ["中","华","人","民","共","和","国"];
alert(arr.sort(function(a,b){return a.localeCompare(b)}));//结果为：共,国,和,华,民,人,中(拼音升序)
-->