javascript学习札记—表格的动态添加、删除
日期：2014-05-16 浏览次数：20362 次
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">张三</td>
<td id="age" width="100">25</td>
<td id="date" width="100">1970-9-9</td>
</tr>
<tr>
<td width=100 id="ID">3</td>
<td id="name" width="100">李四</td>
<td id="age" width="100">18</td>
<td id="date" width="100">1980-9-9</td>
</tr>
<tr>
<td width=100 id="ID">2</td>
<td id="
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
