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); //获取表格的IDvar td = tab.tBodies[0]; //获取表格的tbodyvar 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="name" width="100">王五</td><td id="age" width="100">19</td><td id="date" width="100">1990-9-9</td></tr><tr><td width=100 id="ID">6</td><td id="name" width="100">续写</td><td id="age" width="100">22</td><td id="date" width="100">1965-9-9</td></tr><tr><td width=100 id="ID">5</td><td id="name" width="100">经典</td><td id="age" width="100">30</td><td id="date" width="100">1950-9-9</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)}));//结果为：共,国,和,华,民,人,中(拼音升序)-->