javascript表格操作大全：表格排序/倒序,、動(dòng)態(tài)添加列、批量刪除,、刪除一行,、隔行變色、鼠標(biāo)懸浮切換背景色,、全選/反選,。（IE、火狐都兼容）

quasiceo 2015-01-16

展開(kāi)全文

javascript表格操作大全：表格排序/倒序,、動(dòng)態(tài)添加列,、批量刪除、刪除一行,、隔行變色,、鼠標(biāo)懸浮切換背景色,、全選/反選。（IE,、火狐都兼容）

分類(lèi)： javaScript 2012-08-16 19:51 3617人閱讀評(píng)論(2) 收藏舉報(bào)

ie javascript function button input date

表格.html

[javascript] view plain copy print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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">編號(hào)</th>
<th onclick="sortTable('tab',2,'漢字')" style="cursor:pointer">編程語(yǔ)言</th>
<th onclick="sortTable('tab',3,'漢字')" style="cursor:pointer">所屬公司</th>
<th onclick="sortTable('tab',4,'float')" style="cursor:pointer">市場(chǎng)份額</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">美國(guó)微軟</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="添加數(shù)據(jù)" onclick="addRow()" />
<input type="button" value="刪除選中行" onclick="deleteChecked()"/>
</td>
</tr>
</tfoot>
</table>
</body>
<script type="text/javascript">
/*
全局變量
ID: 保存插入數(shù)據(jù)的編號(hào)
color：保存原來(lái)的背景色
*/
var ID,color;
window.onload = function(){
var myTab = $q("#tab");
ID = myTab.rows.length-1;
}
//鼠標(biāo)懸浮在某元素時(shí)
function over(node){
color = node.style.backgroundColor;
node.style.backgroundColor = '#FF00FF';
}
//鼠標(biāo)離開(kāi)某元素時(shí)
function out(node){
node.style.backgroundColor = color;
}
//全選
function quan(){
var checkArr = $q("$checkbox"); //得到tbody行的集合
var qArr = $q("$quan");
if(qArr[0].checked){ //如果是全選,設(shè)置全部選中
for(var i=0;i<checkArr.length;i++){
checkArr[i].checked = true;
}
}else{ //如果沒(méi)有全選,設(shè)置全部沒(méi)選中
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++){ //循環(huán)將所有行反選
checkArr[i].checked = checkArr[i].checked ? false : true;
}
}
//添加一行數(shù)據(jù)
function addRow(){
var myTab = $q("#tab");
var rowLength = myTab.rows.length;
var newRow = document.createElement("tr"); //創(chuàng)建一行
//設(shè)置隔行變色
if(rowLength%2 == 1){
newRow.style.background = "#00FFFF";
}else{
newRow.style.background = "#00FF00";
}
if(newRow.addEventListener){
//給創(chuàng)建的行添加鼠標(biāo)懸浮的事件
newRow.addEventListener("mouseover",function(){over(newRow);},false);
//給創(chuàng)建的行添加鼠標(biāo)離開(kāi)的事件
newRow.addEventListener("mouseout",function(){out(newRow);},false);
}else if(newRow.attachEvent){
//給創(chuàng)建的行添加鼠標(biāo)懸浮的事件
newRow.attachEvent("onmouseover",function(){over(newRow);});
//給創(chuàng)建的行添加鼠標(biāo)離開(kāi)的事件
newRow.attachEvent("onmouseout",function(){out(newRow);});
}else{
//給創(chuàng)建的行添加鼠標(biāo)懸浮的事件
newRow.onmouseover = function(){over(newRow);};
//給創(chuàng)建的行添加鼠標(biāo)離開(kāi)的事件
newRow.onmouseout = function(){out(newRow);};
}
//創(chuàng)建多列
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("請(qǐng)輸入編程語(yǔ)言：","");
var newCell4 = document.createElement("td");
newCell4.innerHTML = prompt("請(qǐng)輸入所屬公司：","");
var newCell5 = document.createElement("td");
newCell5.innerHTML = prompt("請(qǐng)輸入市場(chǎng)份額：","");
var newCell6 = document.createElement("td");
newCell6.innerHTML = prompt("請(qǐng)輸入誕生日期：","");
var newCell7 = document.createElement("td");
newCell7.innerHTML = '<input type="button" value="刪除" onclick="deleteRow(this.parentNode.parentNode)" />' ;
//將創(chuàng)建的多列添加到行
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); //將創(chuàng)建的行添加到表格body里
}
//刪除一行數(shù)據(jù)
function deleteRow(currentRow){
var tab = $q("#tab"); //獲得表格節(jié)點(diǎn)
tab.deleteRow(currentRow.rowIndex); //刪除選中的行
}
//刪除多行數(shù)據(jù)
function deleteChecked(){
var tab = $q("#tab"); //獲得表格節(jié)點(diǎn)
var checkArr = $q("$checkbox"); //得到tbody行的集合
for(var i=0;i<checkArr.length;i++){
if(checkArr[i].checked){ //用循環(huán)刪除選中的行
var index = checkArr[i].parentNode.parentNode.rowIndex;
tab.deleteRow(index);
}
}
}
//轉(zhuǎn)換數(shù)據(jù)類(lèi)型,v為值,，dataType為數(shù)據(jù)類(lèi)型
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();
}
}
//排序函數(shù),index為索引，type為數(shù)據(jù)類(lèi)型
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;
}
};
}
}
//排序的過(guò)程
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數(shù)組用于存放tbody里的行
//用循環(huán)將所有行放入數(shù)組
for(var i=0;i<newRows.length;i++){
arr.push(newRows[i]);
}
//判斷最后一次排序的列是否與現(xiàn)在要進(jìn)行排序的列相同,，如果是就反序排列
if(tab.sortCol == index){
arr.reverse();
}else{
//使用數(shù)組的sort方法,，傳進(jìn)排序函數(shù)
arr.sort(pai(index,dataType));
}
var oFragment = document.createDocumentFragment(); //創(chuàng)建文檔碎片
for (var i=0; i < arr.length; i++) { //把排序過(guò)的aTRs數(shù)組成員依次添加到文檔碎片
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為課堂筆記整理而成，有部分代碼本次沒(méi)有用到的)

[javascript] view plain copy print ?

var CustomFunctions = {
//獲取子節(jié)點(diǎn)的集合（ie,，ff通用）
getChildNodes:function(node){
var arr = [];
var nodes = node.childNodes;
for(var i in nodes){
if(nodes[i].nodeType == 1){ //查找元素節(jié)點(diǎn)
arr.push(nodes[i]);
}
}
return arr;
},
//獲取第一個(gè)元素子節(jié)點(diǎn)（ie,，ff通用）
getFirstElementChild : function(node){
return node.firstElementChild ? node.firstElementChild : node.firstChild ;
},
//獲取最后一個(gè)元素子節(jié)點(diǎn)（ie，ff通用）
getLastElementChild : function(node){
return node.lastElementChild ? node.lastElementChild : node.lastChild ;
},
//獲取上一個(gè)相鄰節(jié)點(diǎn)（ie,，ff通用）
getPreviousSibling : function(node){
//找到上一個(gè)節(jié)點(diǎn)就返回節(jié)點(diǎn),，沒(méi)找到就返回null
do{
node = node.previousSibling;
}while(node && node.nodeType!=1)
return node;
},
//獲取下一個(gè)相鄰節(jié)點(diǎn) （ie，ff通用）
getNextSibling : function(node){
//找到下一個(gè)節(jié)點(diǎn)就返回節(jié)點(diǎn),，沒(méi)找到就返回null
do{
node = node.nextSibling;
}while(node && node.nodeType!=1)
return node;
},
//將元素插入到指定的node節(jié)點(diǎn)后面
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); //取得第一個(gè)字符
//以#開(kāi)頭,，表示根據(jù)ID查找
if(firstChar === '#'){
return parentEl.getElementById(selector.substr(1));
}
//以$開(kāi)頭，根據(jù)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;
}
//以.開(kāi)頭,，根據(jù)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;
}
}
//否則,，根據(jù)標(biāo)簽名查找
else{
return parentEl.getElementsByTagName(selector);
}
}
else{
return document.all || document.getElementsByTagName("*");
}
};

上一篇javascript學(xué)習(xí)筆記—event屬性和方法以及window事件
下一篇U盤(pán)文件亂碼的解決方案

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布,，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息,，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自： quasiceo > 《待分類(lèi)1》

舉報(bào)/認(rèn)領(lǐng)