筚路蓝缕

不因成就而狂妄、不因失落而气馁、不因欲望而沉重、不因嫉妒而困扰

Javascript

js单元格操作类

Venlentine 
<script language="JavaScript" type="text/JavaScript">  
/*---------------------------------------------------------------------------  
表格、单元格操作类
功能：      合并单元格，拆分单元格，向上插入行，向下插入行，向左插入列，   向右插入列，删除行，删除列  
设计思路：      将表格按总行与总列数进行网状分割，为每个座标网格找到对应的单元格，   这样，在操作过程中就可以随时找出每个单元格的位置及属性  适用IE5.0以上
 -----------------------------------------------------------------------------*/    
function LwgTable() {
    this.tdobj;
    this.trobj;
    this.tblobj;
    this.xy = new Array();
    this.x;
    this.y;
}

function tmpObj(x, y, obj) {
    this.x = x;
    this.y = y;
    this.obj = obj;
}
LwgTable.prototype.getObj = function () {
    var tdobj = document.selection.createRange().parentElement();
    if (!tdobj || tdobj.tagName != "TD") return false;
    var trobj = tdobj.parentElement;
    if (!trobj || trobj.tagName != "TR") return false;
    var tblobj = trobj.parentElement.parentElement;
    if (!tblobj || tblobj.tagName != "TABLE") return false;
    this.tdobj = tdobj;
    this.trobj = trobj;
    this.tblobj = tblobj;
    return true;
}
LwgTable.prototype.setxy = function () {
    for (var i = 0; i < this.tblobj.rows.length; i++) this.xy[i] = new Array();
    for (var i = 0; i < this.tblobj.rows.length; i++) {
        var tmp_row = this.tblobj.rows[i];
        var tmp_y = 0;
        for (var n = 0; n < tmp_row.cells.length; n++) {
            var tmp_cell = tmp_row.cells[n];
            if (this.tdobj == tmp_cell) {
                this.x = i;
                tmp_y = this.y = this.findy(i, tmp_y);
            }
            for (var c = 0; c < tmp_cell.colSpan; c++) {
                for (var r = 0; r < tmp_cell.rowSpan; r++) {
                    var tmp_ir = i + r;
                    var tmp_y = this.findy(tmp_ir, tmp_y);
                    if (c == 0 && r == 0) var tmp_obj = new tmpObj(i, tmp_y, tmp_cell);
                    this.xy[tmp_ir][tmp_y] = tmp_obj;
                }
            }
            tmp_y++;
        }
    }
}
LwgTable.prototype.findy = function (x, y) {
    if (!this.xy[x][y]) return y;
    else return this.findy(x, y + 1);
}
LwgTable.prototype.mergeCell = function (what) {
    switch (what) {
    case "up":
        var tmp_obj = this.checkToMerge(-1, 0);
        if (!tmp_obj) return false;
        if (this.tdobj.innerHTML != "?") tmp_obj.obj.innerHTML += this.tdobj.innerHTML;
        tmp_obj.obj.rowSpan += this.dropCell(this.trobj.rowIndex, this.tdobj.cellIndex, 'r');
        break;
    case "down":
        var tmp_obj = this.checkToMerge(this.tdobj.rowSpan, 0);
        if (!tmp_obj) return false;
        if (tmp_obj.obj.innerHTML != "?") this.tdobj.innerHTML += tmp_obj.obj.innerHTML;
        this.tdobj.rowSpan += this.dropCell(this.trobj.rowIndex + this.tdobj.rowSpan, tmp_obj.obj.cellIndex, 'r');
        break;
    case "left":
        var tmp_obj = this.checkToMerge(0, -1);
        if (!tmp_obj) return false;
        if (this.tdobj.innerHTML != "?") tmp_obj.obj.innerHTML += this.tdobj.innerHTML;
        tmp_obj.obj.colSpan += this.dropCell(this.trobj.rowIndex, this.tdobj.cellIndex, 'c');
        break;
    case "right":
        var tmp_obj = this.checkToMerge(0, this.tdobj.colSpan);
        if (!tmp_obj) return false;
        if (tmp_obj.obj.innerHTML != "?") this.tdobj.innerHTML += tmp_obj.obj.innerHTML;
        this.tdobj.colSpan += this.dropCell(this.trobj.rowIndex, this.tdobj.cellIndex + 1, 'c');
        break;
    default:
        break;
    }
}
LwgTable.prototype.checkToMerge = function (x, y) {
    if (!this.xy[this.x + x]) return false;
    var tmp_obj = this.xy[this.x + x][this.y + y];
    if (!tmp_obj) return false;
    if (x != 0) {
        if (tmp_obj.y != this.y || tmp_obj.obj.colSpan != this.tdobj.colSpan) return false;
    } else if (y != 0) {
        if (tmp_obj.x != this.x || tmp_obj.obj.rowSpan != this.tdobj.rowSpan) return false;
    }
    return tmp_obj;
}
LwgTable.prototype.dropCell = function (x, y, kind) {
    var trobj = this.tblobj.rows[x];
    if (!trobj) return false;
    var rowspans = trobj.cells[y].rowSpan;
    var colspans = trobj.cells[y].colSpan;
    trobj.deleteCell(y);
    if (kind == "r") return rowspans;
    else if (kind == "c") return colspans;
}
LwgTable.prototype.changeRowspan = function (x, num) {
    var y = 0;
    while (y < this.xy[x].length) {
        var tmp = this.xy[x][y];
        if (tmp.obj.rowSpan > 1) {
            tmp.obj.rowSpan += num;
        }
        y += tmp.obj.colSpan;
    }
}
LwgTable.prototype.insertRow = function (what, num) {
    var x = this.x;
    var x1 = (what == 'up') ? x : (x + 1);
    if (x1 == this.tblobj.rows.length) {
        for (var n = 0; n < num; n++) {
            var newRow = this.tblobj.insertRow(x1);
            var lastxy = this.xy[this.xy.length - 1];
            var i = 0;
            while (i < lastxy.length) {
                var newCell = newRow.insertCell();
                newCell.innerHTML = "?";
                newCell.mergeAttributes(lastxy[i].obj);
                newCell.rowSpan = 1;
				i += lastxy[i].obj.colSpan;
            }
        }
        return true;
    }
    for (var n = 0; n < num; n++) {
        var trobj = this.tblobj.rows[x];
        var newRow = this.tblobj.insertRow(x1);
        var delcell = new Array();
        for (var i = 0; i < trobj.cells.length; i++) {
            if (trobj.cells[i].rowSpan == 1) {
                var newCell = newRow.insertCell();
                newCell.innerHTML = "?";
                newCell.mergeAttributes(trobj.cells[i])
            } else if (what == 'up') {
                var newCell = newRow.insertCell();
                trobj.cells[i].rowSpan += 1;
                newCell.innerHTML = trobj.cells[i].innerHTML;
                delcell[i] = 1;
                newCell.mergeAttributes(trobj.cells[i])
            }
        }
        var deli = 0;
        for (i in delcell) {
            trobj.deleteCell(i - deli);
            deli++;
        }
    }
    this.changeRowspan(this.x, num);
}
LwgTable.prototype.deleteRow = function () {
    if (this.trobj.rowIndex == this.tblobj.rows.length - 1) {
        this.tblobj.deleteRow(this.trobj.rowIndex);
        return true;
    }
    var y = 0;
    while (y < this.xy[this.x].length) {
        var tmp_obj = this.xy[this.x][y].obj;
        if (tmp_obj.rowSpan > 1) {
            tmp_obj.rowSpan -= 1;
            if (tmp_obj.parentElement.rowIndex == this.x) {
                if (tmp_obj.cellIndex < this.trobj.cells.length - 1) var cellIndex = this.xy[this.x + 1][y + tmp_obj.colSpan].obj.cellIndex;
                else var cellIndex = this.tblobj.rows[this.x + 1].cells.length;
                newCell = this.tblobj.rows[this.x + 1].insertCell(cellIndex);
				newCell.replaceNode(tmp_obj);
            }
        }
        y += tmp_obj.colSpan;
    }
    this.tblobj.deleteRow(this.trobj.rowIndex);
}
LwgTable.prototype.deleteCol = function () {
    var x = 0;
    while (x < this.xy.length) {
        var tmp_obj = this.xy[x][this.y].obj;
        x += tmp_obj.rowSpan
        if (tmp_obj.colSpan == 1) {
            tmp_obj.parentElement.deleteCell(tmp_obj.cellIndex);
        } else tmp_obj.colSpan -= 1;
    }
}
LwgTable.prototype.insertCol = function (what, num) {
    var x = 0;
    while (x < this.xy.length) {
        var tmp_obj = this.xy[x][this.y].obj;
        x += tmp_obj.rowSpan
        if (tmp_obj.colSpan == 1) {
            var cellIndex = (what == "right") ? (tmp_obj.cellIndex + 1) : tmp_obj.cellIndex;
            for (var n = 0; n < num; n++) {
                var newCell = tmp_obj.parentElement.insertCell(cellIndex);
                newCell.innerHTML = "?";
                newCell.mergeAttributes(tmp_obj)
            }
        } else tmp_obj.colSpan += num;
    }
}
LwgTable.prototype.rowSplit = function (num) {
    if (num < 2) return false;
    while (num > 1) {
        var y = 0;
        var tmp_x = this.x + this.tdobj.rowSpan - 1;
        var tmp_index = 0;
        while (y < this.xy[tmp_x].length) {
            vartmp_obj = this.xy[tmp_x][y]
            if (this.tdobj.rowSpan > 1) {
                if (tmp_obj.obj == this.tdobj) {
                    var newCell = this.tblobj.rows[tmp_x].insertCell(tmp_index);
                    newCell.innerHTML = "?";
                    newCell.mergeAttributes(this.tdobj);
					newCell.rowSpan = 1
                }
                if (tmp_x == tmp_obj.x) tmp_index++;
            } else {
                if (tmp_obj.obj == this.tdobj) {
                    var newRow = this.tblobj.insertRow(this.x + 1);
                    var newCell = newRow.insertCell(0);
                    newCell.innerHTML = "?";
                } else tmp_obj.obj.rowSpan += 1;
            }
            y += tmp_obj.obj.colSpan;
        }
        if (this.tdobj.rowSpan > 1) 
		this.tdobj.rowSpan -= 1;
		num -= 1;
    }
}
LwgTable.prototype.colSplit = function (num) {
    var x = 0;
    while (x < this.xy.length) {
        var tmp_obj = this.xy[x][this.y].obj;
        x += tmp_obj.rowSpan
        if (tmp_obj == this.tdobj) {
            for (var n = 0; n < num; n++) {
                var newCell = tmp_obj.parentElement.insertCell(this.tdobj.cellIndex);
                newCell.innerHTML = "?";
                newCell.mergeAttributes(tmp_obj)
            }
        } else tmp_obj.colSpan += num;
    }
}

function table_change() {
    var t = new LwgTable();
    if (!t.getObj()) return false;
    t.setxy();
    var args = table_change.arguments;
    switch (args[0]) {
    case "insertrow_up":
        t.insertRow('up', args[1]);
		break;
    case "insertrow_down":
        t.insertRow('down', args[1]); break;
    case "deleterow":
        t.deleteRow(); break;
    case "deletecol":
        t.deleteCol(); break;
    case "insertcol_left":
        t.insertCol('left', args[1]); break;
    case "insertcol_right":
        t.insertCol('right', args[1]); break;
    case "rowsplit":
        t.rowSplit(args[1]); break;
    case "colsplit":
        t.colSplit(args[1]); break;
    case "merge":
        t.mergeCell(args[1]);
        break
    default:
        break;
    }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<table border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">
<tr bgcolor="#FFFFFF">
	<td align="right" bgcolor="#efefef">
		合并单元格
	</td>
	<td>
		<input type="button" name="Submit2" value="向上" onclick="table_change('merge','up')"><input type="button" name="Submit22" value="向下" onclick="table_change('merge','down')"><input type="button" name="Submit23" value="向左" onclick="table_change('merge','left')"><input type="button" name="Submit24" value="向右" onclick="table_change('merge','right')">
	</td>
</tr>
<tr bgcolor="#FFFFFF">
	<td align="right" bgcolor="#efefef">
		拆分单元格
	</td>
	<td>
		<input type="button" name="Submit2424" value="拆成3行" onclick="table_change('rowsplit',3)"><input type="button" name="Submit24242" value="拆成2列" onclick="table_change('colsplit',2)">
	</td>
</tr>
<tr bgcolor="#FFFFFF">
	<td align="right" bgcolor="#efefef">
		插入行
	</td>
	<td>
		<input type="button" name="Submit242" value="向上插入3行" onclick="table_change('insertrow_up',3)"><input type="button" name="Submit2422" value="向下插入2行" onclick="table_change('insertrow_down',2)">
	</td>
</tr>
<tr bgcolor="#FFFFFF">
	<td align="right" bgcolor="#efefef">
		插入列
	</td>
	<td>
		<input type="button" name="Submit2423" value="向左插入3列" onclick="table_change('insertcol_left',3)"><input type="button" name="Submit24223" value="向右插入2列" onclick="table_change('insertcol_right',2)">
	</td>
</tr>
<tr bgcolor="#FFFFFF">
	<td align="right" bgcolor="#efefef">
		删除行
	</td>
	<td>
		<input type="button" name="Submit24222" value="删除行" onclick="table_change('deleterow')">
	</td>
</tr>
<tr bgcolor="#FFFFFF">
	<td align="right" bgcolor="#efefef">
		删除列
	</td>
	<td>
		<input type="button" name="Submit242222" value="删除列" onclick="table_change('deletecol')">
	</td>
</tr>
</table>
 使用方式：先在单元格中建立一个选区，再点击上面按钮<br>
<table width="100%" border="1">
<tr>
	<td colspan="2">
		1
	</td>
	<td>
		2
	</td>
	<td>
		3
	</td>
</tr>
<tr>
	<td bgcolor="#CCCCCC">
		?
	</td>
	<td rowspan="2">
		47
	</td>
	<td>
		5
	</td>
	<td>
		6
	</td>
</tr>
<tr>
	<td rowspan="3">
		45
	</td>
	<td>
		8
	</td>
	<td bgcolor="#CCCCCC">
		9
	</td>
</tr>
<tr>
	<td rowspan="3">
		10
	</td>
	<td bgcolor="#FFFFCC">
		11
	</td>
	<td rowspan="2">
		1214
	</td>
</tr>
<tr>
	<td bgcolor="#CCCCCC">
		13
	</td>
</tr>
<tr>
	<td>
		123
	</td>
	<td bgcolor="#CCCCCC">
		?
	</td>
	<td>
		6
	</td>
</tr>
</table>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部