javascript表格操作大全：表格排序/倒序、动态添加列、批量删除、删除一行、隔行变色、鼠标悬浮切换背景色、全选/反选。（IE、火狐都兼容）

关注

转载最新推荐文章于 2026-07-05 15:52:59 发布 935 阅读 AI 写同款· GEO 优化 ›

WPS JS宏示例——工作表排序 “我那么喜欢你，你却要我当见不得光的情人+提款机” 对工作表进行排序是很常见的需求了，这里直接写个通用的宏给不熟悉的朋友使用： /** * @param {object|string} Workbook 工作薄名称 * @returns {array} obj.visible 显示的工作表名称 * @returns {array} obj.hidden 隐藏的工作表名称 * @example * let foo = get_names_of_sheets("工作薄1").visible * // [. 阅读详情

表格.html

[javascript] view plain copy 
   
 print?
 <!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" src="domutil.js" ></script>  
 </head>  
   
 <body>    
       
                 <!--以下数据纯属虚构-->  
   
     <table id="tab" border="1" style =" align:center;text-align:center ">  
         <thead style="background:#0000FF" onmouseover="over(this)" onmouseout="out(this)">  
             <tr>  
                 <th><input type="checkbox" name="quan" onclick="quan()" style="cursor:pointer"/>全选</th>  
                 <th onclick="sortTable('tab',1,'int')" style="cursor:pointer">编号</th>  
                 <th onclick="sortTable('tab',2,'汉字')" style="cursor:pointer">编程语言</th>  
                 <th onclick="sortTable('tab',3,'汉字')" style="cursor:pointer">所属公司</th>  
                 <th onclick="sortTable('tab',4,'float')" style="cursor:pointer">市场份额</th>  
                 <th onclick="sortTable('tab',5,'date')" style="cursor:pointer">诞生日期</th>  
                 <th style="cursor:pointer">操作</th>  
             </tr>  
         </thead>  
         <tbody id="tbody">  
             <tr style="background:#00FF00" onmouseover="over(this)" onmouseout="out(this)">  
                 <td><input type="checkbox" name="checkbox" /></td>  
                 <td width=100 id="ID">4</td>  
                 <td id="name" width="100">Java</td>  
                 <td id="company" width="100" >甲骨文公司</td>  
                 <td id="age" width="100">47.6</td>  
                 <td id="date" width="100">1970/09/09</td>  
                 <td ><input type="button" value="删除" onclick="deleteRow(this.parentNode.parentNode)"/></td>  
             </tr>  
             <tr style="background:#00FFFF" onmouseover="over(this)" onmouseout="out(this)">  
                 <td><input type="checkbox" name="checkbox" /></td>  
                 <td width=100 id="ID">6</td>  
                 <td id="name" width="100">ASP</td>  
                 <td id="company" width="100">微软公司</td>  
                 <td id="age" width="100">30.3</td>  
                 <td id="date" width="100">1980/09/09</td>  
                 <td ><input type="button" value="删除" onclick="deleteRow(this.parentNode.parentNode)"/></td>  
             </tr>  
             <tr style="background:#00FF00" onmouseover="over(this)" onmouseout="out(this)">  
                 <td><input type="checkbox" name="checkbox" /></td>  
                 <td width=100 id="ID">3</td>  
                 <td id="name" width="100">PHP</td>  
                 <td id="company" width="100">公司Zend</td>  
                 <td id="age" width="100">22.1</td>  
                 <td id="date" width="100">1994/07/09</td>  
                 <td ><input type="button" value="删除" onclick="deleteRow(this.parentNode.parentNode)"/></td>  
             </tr>  
             <tr style="background:#00FFFF" onmouseover="over(this)" onmouseout="out(this)">  
                 <td><input type="checkbox" name="checkbox" /></td>  
                 <td width=100 id="ID">1</td>  
                 <td id="name" width="100">Objective-C</td>  
                 <td id="company" width="100" >Stepstone公司</td>  
                 <td id="age" width="100">35.9</td>  
                 <td id="date" width="100">1980/01/01</td>  
                 <td ><input type="button" value="删除" onclick="deleteRow(this.parentNode.parentNode)"/></td>  
             </tr>  
             <tr style="background:#00FF00" onmouseover="over(this)" onmouseout="out(this)">  
                 <td><input type="checkbox" name="checkbox" /></td>  
                 <td width=100 id="ID">5</td>  
                 <td id="name" width="100">VB</td>  
                 <td id="company" width="100">美国微软</td>  
                 <td id="age" width="100">32.7</td>  
                 <td id="date" width="100">1991/09/09</td>  
                 <td ><input type="button" value="删除" onclick="deleteRow(this.parentNode.parentNode)"/></td>  
             </tr>  
             <tr style="background:#00FFFF" onmouseover="over(this)" onmouseout="out(this)">  
                 <td><input type="checkbox" name="checkbox" /></td>  
                 <td width=100 id="ID">2</td>  
                 <td id="name" width="100">javascript</td>  
                 <td id="company" width="100">Netscape</td>  
                 <td id="age" width="100">33.8</td>  
                 <td id="date" width="100">1992/06/09</td>  
                 <td ><input type="button" value="删除" onclick="deleteRow(this.parentNode.parentNode)"/></td>  
             </tr>  
         </tbody>  
         <tfoot style="background:#C0C0C0">  
             <tr onmouseover="over(this)" onmouseout="out(this)">  
                 <td><input type="checkbox" name="fan" onclick="fan()"/>反选</td>  
                 <td colspan="6">  
                 <input type="button" value="添加数据" onclick="addRow()" />       
                 <input type="button" value="删除选中行" onclick="deleteChecked()"/>  
                 </td>  
             </tr>  
         </tfoot>  
     </table>  
       
 </body>   
 <script type="text/javascript">   
         /* 
         全局变量 
         ID:    保存插入数据的编号 
         color：保存原来的背景色 
         */  
         var ID,color;  
         window.onload = function(){  
             var myTab = $q("#tab");  
             ID = myTab.rows.length-1;  
         }  
         //鼠标悬浮在某元素时  
         function over(node){  
             color = node.style.backgroundColor;  
             node.style.backgroundColor = '#FF00FF';  
         }  
         //鼠标离开某元素时  
         function out(node){  
             node.style.backgroundColor = color;  
         }  
         //全选  
         function quan(){  
             var checkArr = $q("$checkbox"); //得到tbody行的集合  
             var qArr = $q("$quan");   
             if(qArr[0].checked){ //如果是全选,设置全部选中  
                 for(var i=0;i<checkArr.length;i++){     
                     checkArr[i].checked = true;  
                 }  
             }else{  //如果没有全选,设置全部没选中  
                 for(var i=0;i<checkArr.length;i++){    
                     checkArr[i].checked = false;  
                 }  
             }  
         }  
   
         //反选  
         function fan(){  
             var checkArr = $q("$checkbox"); //得到tbody行的集合  
             for(var i=0;i<checkArr.length;i++){  //循环将所有行反选  
                 checkArr[i].checked = checkArr[i].checked ? false : true;  
             }  
         }  
   
         //添加一行数据  
         function addRow(){  
             var myTab = $q("#tab");  
             var rowLength = myTab.rows.length;  
             var newRow = document.createElement("tr"); //创建一行  
             //设置隔行变色  
             if(rowLength%2 == 1){  
                 newRow.style.background = "#00FFFF";  
             }else{  
                 newRow.style.background = "#00FF00";  
             }  
             if(newRow.addEventListener){  
                 //给创建的行添加鼠标悬浮的事件  
                 newRow.addEventListener("mouseover",function(){over(newRow);},false);  
                 //给创建的行添加鼠标离开的事件  
                 newRow.addEventListener("mouseout",function(){out(newRow);},false);  
             }else if(newRow.attachEvent){  
                 //给创建的行添加鼠标悬浮的事件  
                 newRow.attachEvent("onmouseover",function(){over(newRow);});  
                 //给创建的行添加鼠标离开的事件  
                 newRow.attachEvent("onmouseout",function(){out(newRow);});  
             }else{  
                 //给创建的行添加鼠标悬浮的事件  
                 newRow.onmouseover = function(){over(newRow);};  
                 //给创建的行添加鼠标离开的事件  
                 newRow.onmouseout = function(){out(newRow);};  
             }    
             //创建多列  
             var newCell1 = document.createElement("td");  
             newCell1.innerHTML = '<input type="checkbox" name="checkbox" />';  
             var newCell2 = document.createElement("td");  
             newCell2.innerHTML = ID;  
             ID += 1;  
             var newCell3 = document.createElement("td");  
             newCell3.innerHTML = prompt("请输入编程语言：","");  
             var newCell4 = document.createElement("td");  
             newCell4.innerHTML = prompt("请输入所属公司：","");  
             var newCell5 = document.createElement("td");  
             newCell5.innerHTML = prompt("请输入市场份额：","");  
             var newCell6 = document.createElement("td");  
             newCell6.innerHTML = prompt("请输入诞生日期：","");  
             var newCell7 = document.createElement("td");  
             newCell7.innerHTML = '<input type="button" value="删除" onclick="deleteRow(this.parentNode.parentNode)" />' ;  
             //将创建的多列添加到行  
             newRow.appendChild(newCell1);  
             newRow.appendChild(newCell2);  
             newRow.appendChild(newCell3);  
             newRow.appendChild(newCell4);  
             newRow.appendChild(newCell5);  
             newRow.appendChild(newCell6);  
             newRow.appendChild(newCell7);  
             var tbody = myTab.tBodies[0]; //获取表格的tbody  
             tbody.appendChild(newRow);  //将创建的行添加到表格body里  
         }   
         //删除一行数据  
         function deleteRow(currentRow){  
             var tab = $q("#tab"); //获得表格节点  
             tab.deleteRow(currentRow.rowIndex); //删除选中的行  
         }  
         //删除多行数据  
         function deleteChecked(){  
             var tab = $q("#tab"); //获得表格节点  
             var checkArr = $q("$checkbox");  //得到tbody行的集合  
             for(var i=0;i<checkArr.length;i++){  
                 if(checkArr[i].checked){  //用循环删除选中的行  
                     var index = checkArr[i].parentNode.parentNode.rowIndex;  
                     tab.deleteRow(index);  
                 }  
             }  
         }  
         //转换数据类型,v为值，dataType为数据类型  
         function convert(v,dataType){  
             switch(dataType){  
                 case "int":  
                     return parseInt(v);  
                 case "float":  
                     return parseFloat(v);  
                 case "date":  
                     return (new Date(Date.parse(v)));  
                 default:  
                     return v.toString();  
             }  
         }  
         //排序函数,index为索引，type为数据类型  
         function pai(index,dataType){  
             if(dataType === "汉字"){  
                 return function compare(a,b){  
                             var str1 = convert(a.cells[index].innerHTML,dataType);   
                             var str2 = convert(b.cells[index].innerHTML,dataType);  
                             return str1.localeCompare(str2);  
                         };  
             }else{  
                 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 = $q("#"+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.push(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数组成员依次添加到文档碎片  
                 if(i%2 == 1){  
                     arr[i].style.background = "#00FFFF";  
                     oFragment.appendChild(arr[i]);  
                 }else{  
                     arr[i].style.background = "#00FF00";  
                     oFragment.appendChild(arr[i]);  
                 }  
             }  
             td.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新  
             tab.sortCol = index;  //记录最后一次排序的列索引  
         }  
     </script>  
 </html>  

domutil.js

(此js为课堂笔记整理而成，有部分代码本次没有用到的)

[javascript] view plain copy 
   
 print?
 var CustomFunctions = {  
     //获取子节点的集合（ie，ff通用）  
     getChildNodes:function(node){  
         var arr = [];  
         var nodes = node.childNodes;  
         for(var i in nodes){  
             if(nodes[i].nodeType == 1){ //查找元素节点  
                 arr.push(nodes[i]);  
             }  
         }  
         return arr;  
     },  
     //获取第一个元素子节点（ie，ff通用）  
     getFirstElementChild : function(node){  
         return node.firstElementChild ? node.firstElementChild : node.firstChild ;  
     },  
     //获取最后一个元素子节点（ie，ff通用）  
     getLastElementChild : function(node){  
         return node.lastElementChild ? node.lastElementChild : node.lastChild ;  
     },  
     //获取上一个相邻节点（ie，ff通用）  
     getPreviousSibling : function(node){  
         //找到上一个节点就返回节点，没找到就返回null  
         do{  
             node = node.previousSibling;  
         }while(node && node.nodeType!=1)  
         return node;  
     },  
     //获取下一个相邻节点 （ie，ff通用）  
     getNextSibling : function(node){  
         //找到下一个节点就返回节点，没找到就返回null  
         do{  
             node = node.nextSibling;  
         }while(node && node.nodeType!=1)  
         return node;  
     },  
     //将元素插入到指定的node节点后面  
     insertAfter : function(newNode,targetNode){  
         if(newNode && targetNode){  
             var parent = targetNode.parentNode;  
             var nextNode = this.getNextSibling(targetNode);  
             if(nextNode && parent){  
                 parent.insertBefore(newNode,nextNode);  
             }else{  
                 parent.appendChild(newNode);  
             }  
         }  
     }  
 };  
   
 /*清除字符串前后的空格*/  
 String.prototype.trim=function(){  
     return this.replace(/^\s*|\s*$/,"");  
 };  
   
 /* 
 查找元素： 
 $q("div"):bytagname 
 $q(".l"):byclassname 
 $q("#l"):byid 
 $q("$name"):byname 
 selector:选择符 
 parentElement:父元素 
 */  
 window.$q = function(selector,parentElement){  
     if(selector && (typeof selector) === 'string'){  
         selector = selector.trim();//去掉前后空格  
         var parentEl = parentElement || document;  
         var nodeArr = new Array();    
         var firstChar = selector.substr(0,1);   //取得第一个字符  
         //以#开头，表示根据ID查找  
         if(firstChar === '#'){  
             return parentEl.getElementById(selector.substr(1));  
         }  
         //以$开头，根据name查找  
         else if(firstChar === '$'){  
             var all = parentEl.getElementsByTagName("*");  
             for(var i=0;i<all.length;i++){  
                 var name = all[i].getAttribute("name");  
                 if(name === selector.substr(1)){  
                     nodeArr.push(all[i]);  
                 }  
             }  
             delete i;  
             return nodeArr;  
         }  
         //以.开头，根据class名查找  
         else if(firstChar === '.'){  
             var className = selector.substr(1);  
             if(parentEl.getElementsByClassName){  
                 return parentEl.getElementsByClassName(className);  
             }  
             else{  
                 var childList = parentEl.getElementsByTagName("*");  
                 for(var i=0;i<childList.length;i++){  
                     var nodeClassName = childList[i].className;  
                     var classNameArr = nodeClassName.split(' ');  
                     for(var j=0;j<classNameArr.length;j++){  
                         if(classNameArr[j]===className){  
                             nodeArr.push(childList[i]);  
                         }  
                     }  
                     delete j;  
                 }  
                 delete i;  
                 return nodeArr;  
             }  
         }  
         //否则，根据标签名查找  
         else{  
             return parentEl.getElementsByTagName(selector);  
         }  
           
     }  
     else{  
         return document.all || document.getElementsByTagName("*");  
     }  
   
 };  