---注意这里的demo中的css在这里被禁止了，出不出来，可以粘贴到本地运行查看情况---
实现效果demo
/**
/**
* Created by lenovo on 2017/1/24.
*/
/*
* id:表格的id
* hiddenRowArr：arr
* selectMore:true||false||默认为false
* */
function eventTable(id, hiddenRowArr, selectMore) {
var self = this;
this.id = document.getElementById(id);
this.hiddenRowArr = hiddenRowArr || null;
this.selectMore = selectMore || false;
if (this.id) {
this.onselectstart = function () {
return false
};
this._init(this.id);
}
}
eventTable.prototype = {
_init: function (id) {
this._formatTable(id);
id.className = "eventTable";
this.attachEvent();
this._format();
},
_formatTable: function (tableObject, border, cellSpacing, cellPadding, align) {
if (border == null && isNaN(parseInt(border))) {
border = 0;
} else {
border = parseInt(border);
}
if (cellSpacing == null && isNaN(parseInt(cellSpacing))) {
cellSpacing = 0
} else {
cellSpacing = parseInt(cellSpacing);
}
if (cellPadding == null && isNaN(parseInt(cellPadding))) {
cellPadding = 0
} else {
cellPadding = parseInt(cellPadding);
}
tableObject.border = border;
tableObject.cellPadding = cellSpacing;
tableObject.cellSpacing = cellPadding;
if (align)
tableObject.align = align;
},
_format: function () {
var self=this;
var rowCount = this.id.rows.length;
var tbHead = this.id.rows[0];
var cellCount = null;
if (0 in tbHead.cells) {
if (tbHead.cells[0].tagName.toUpperCase() == "TH") {
}
}
for (var i = 1; i < rowCount; i++) {
if (cellCount == null) {
cellCount = this.id.rows[i].cells.length;
}
for (var cell = 0; cell < cellCount; cell++) {
if (this.id.rows[i].cells[cell].className.indexOf('item-')>-1){
this.id.rows[i].cells[cell].className=this.id.rows[i].cells[cell].className.replace(/item-d/,'item-' + ((i + 1) % 2));
}else
this.id.rows[i].cells[cell].className = 'item-' + ((i + 1) % 2);
}
}
},
//event
attachEvent: function (event) {
var self = this;
var event = window.event || event;
var rows = this.id.rows;
var rowlength = rows.length;
for (var i = 0; i < rowlength; i++) {
rows[i].onclick = function () {
self.selectRow(this)
}
rows[i].ondblclick = function () {
self.DbClick(this)
}
}
},
DbClick: function (row) {
alert(111);
},
Eclick: function () {
return true
},
selectRow: function (row) {
var self = this;
if (this.selectMore) {
if (!this.RowArr) {
this.RowArr = []
}
if (this.judgeTrExit(row)) {
this.RowArr.push(row);
}
if (this.RowArr.length == 0) {
this.RowArr.push(row);
}
for (var i = 0, l = row.cells.length; i < l; i++) {
if (row.cells[i].className.indexOf("selected") > -1) {
row.cells[i].className = row.cells[i].className;
} else {
row.cells[i].className = 'selected ' + row.cells[i].className;
}
}
}
else {
this.RowArr = [];
this.RowArr.push(row);
for (var rows = 1, rowsl = this.id.rows.length; rows < rowsl; rows++) {
for (var cells = 0, cellsL = this.id.rows[rows].cells.length; cells < cellsL; cells++) {
self.delectClass(self.id.rows[rows].cells[cells], "selected")
}
}
for (var i = 0, l = row.cells.length; i < l; i++) {
if (row.cells[i].className.indexOf("selected") > -1) {
row.cells[i].className = row.cells[i].className;
} else {
row.cells[i].className = 'selected ' + row.cells[i].className;
}
}
}
},
judgeTrExit: function (row) {
for (var j = 0; j < this.RowArr.length; j++) {
if (this.RowArr[j].rowIndex == row.rowIndex) {
return false;
}
}
return true
},
delectClass: function (el, css) {
var attr = "";
var classNames = el.className.split(/s+/);
console.log(classNames)
for (var i = 0, l = classNames.length; i < l; i++) {
if (classNames[i]) {
if (!(css == classNames[i])) {
attr += classNames[i] + " ";
}
}
}
console.log(attr)
el.className = attr;
},
operateRow: function (canshu) {
//
switch (canshu) {
case "up":
this.upRow();
break;
case "down":
this.downRow();
break;
case "delectRow":
this.decectRow();
}
},
upRow: function () {
var row = this.RowArr[0];
var rowIndex=row.rowIndex;
var newCell,tempCell;
if (rowIndex>=2){
var newTr=this.id.insertRow(rowIndex-1);
for (var i=0;i<row.cells.length;i++){
newCell= newTr.insertCell(i);
newCell.innerHTML = row.cells[i].innerHTML;
newCell.className=row.cells[i].className;
console.log(newCell.className);
}
this.id.deleteRow(rowIndex+1);
this.RowArr[0]=newTr;
this._format();
this.attachEvent();
}
},
decectRow: function () {
var row = this.RowArr[0];
this.id.deleteRow(row.rowIndex);
this._format();
},
downRow: function () {
var row = this.RowArr[0];
var rowIndex=row.rowIndex;
var newCell,tempCell;
if (rowIndex+2<=this.id.rows.length){
var newTr=this.id.insertRow(rowIndex+2);
for (var i=0;i<row.cells.length;i++){
newCell= newTr.insertCell(i);
newCell.innerHTML = row.cells[i].innerHTML;
newCell.className=row.cells[i].className;
}
this.id.deleteRow(rowIndex);
this.RowArr[0]=newTr;
this.attachEvent();
this._format();
}
}
}
html
| ID | Name | Gender | Birthday |
|---|---|---|---|
| 1 | 刘德华 | 男 | 1985/1/1 |
| 2 | 刘若英 | 女 | 1987/3/1 |
| 3 | 张韶涵 | 女 | 1987/1/2 |
| 4 | 周杰伦 | 男 | 1982/5/12 |
window.onload=function(){
var bbb=new eventTable('gridview3');
document.getElementById('delect').onclick=function(){
bbb.operateRow('delectRow')
}
document.getElementById('down').onclick=function(){
bbb.operateRow('down')
}
document.getElementById('up').onclick=function(){
bbb.operateRow('up')
}
}