单元格合并问题,得以解决300分相送

Question

对于当前格curCell来说:
表格:var table=curCell.parentElement.parentElement
本行:var curRow=curCell.parentElement
上一行: table.rows[curRow.rowIndex-1]
下一行: table.rows[curRow.rowIndex+1]
前一列: curRow.cells[curCell.cellIndex-1]
后一列: curRow.cells[curCell.cellIndex+1]

Answer 1

如果第9号单元格的上一行的相同列单元格就是
var ctr = td9.parentNode;                 //本行
var btr = table.rows[ctr.rowIndex-1]      //上一行
result = ctr.cells[td9.cellIndex];        //上一行的那个单元格
可是td9的可视模式是td1,而不是td7

Answer 2

如果第9号单元格的上一行的相同列单元格就是
var ctr = td9.parentNode;                 //本行
var btr = table.rows[ctr.rowIndex-1]      //上一行
result = btr.cells[td9.cellIndex];        //上一行的那个单元格
可是td9的可视模式下,上一个单元格是td1,而不是td7

Answer 3

单元格合并的例子,不过有bug,合并后的cell再合并可能会乱<SCRIPT LANGUAGE="JavaScript">
<!--
var startX = 0;
var startY = 0;
var endX = 0;
var endY = 0;
var Scale = false; // true时为鼠标状态为选择时
var Drag = false; // true时为鼠标状态为拖动时
var Drop = false; // true时为鼠标状态为放置被拖动的单元格时
var r = 10; // 表格的行数
var c = 10; // 表格的列数
var cWidth = 25; // 单元格的宽度
var sWidth = 0;
var DropType = 2; // Drop方式
var selectedBgColor = "#ff0000"; // 被选中的单元格背景色
var MovedBgColor = "#eeeeee"; // 被移到第二个表格后的背景色
var tdArrObj = new Array(); // 用来放被移动的单元格的数组
var tdObj = null; // tdArrObj里的每个成员
document.onmousedown = function(){
if(window.event.srcElement.tagName == "TD" && window.event.srcElement.bgColor == selectedBgColor){
Drag = true;
tdArrObj = new Array();
var tdList = document.getElementById("myTb1").getElementsByTagName("td");
for(var i=0;i<tdList.length;i++){
if(tdList[i].bgColor == selectedBgColor){
var tdObj = tdList[i];
tdObj.style.zIndex=1;
tdObj.mouseDownY=event.clientY;
tdObj.mouseDownX=event.clientX;
tdObj.setCapture();
tdArrObj[tdArrObj.length] = tdObj;
}
}
}else{
Scale = true;
startX = event.clientX;
startY = event.clientY;
d.style.display = "";
d.style.border = "1px solid #333333";
d.style.top = startY;
d.style.left = startX;
d.style.width = "0px"
d.style.height = "0px"
}
}
document.onmousemove = MouseMove;function MouseMove(){
if(Scale){
endX = event.clientX;
endY = event.clientY;
d.style.width = Math.abs(endX -startX) + "px";
d.style.height = Math.abs(endY -startY) + "px";
if(endX<startX) d.style.left = startX - Math.abs(endX -startX);
if(endY<startY) d.style.top = startY - Math.abs(endY -startY);
window.status = "Width:" + Math.abs(endX -startX) + "  Height:" + Math.abs(endY -startY);
}
}
document.onmouseup = function(){
if(Scale){
Scale = false;
d.style.display = "none"; var tdList = document.getElementById("myTb1").getElementsByTagName("td");
for(var i=0;i<tdList.length;i++)
if(tdList[i].bgColor != MovedBgColor && event.srcElement.tagName == "TD") tdList[i].bgColor = "#ffffff";
if(endX == 0 || endY == 0 || startX == 0 || startY == 0){
endX = startX = window.event.clientX;
endY = startY = window.event.clientY;
} var x1 = 0,x2 = 0, y1 =0, y2 = 0, xx1 = 0, xx2 = 0, yy1=0, yy2 = 0;
if(endX>startX){
x1 = endX;
x2 = startX;
}else{
x2 = endX;
x1 = startX;
}
if(endY>startY){
y1 = endY;
y2 = startY;
}else{
y2 = endY;
y1 = startY;
}
xx1 = x1;xx2 = x2;yy1 = y1;yy2 = y2;
while(xx2<=xx1){
yy1 = y1;yy2 = y2;
while(yy2<=yy1){
var oElement = document.elementFromPoint(xx2, yy2);
if(oElement.tagName == "TD"){
if(oElement.bgColor != MovedBgColor) oElement.bgColor = selectedBgColor;
}
yy2 += (cWidth/2);
}
xx2 += (cWidth/2);
}
endX = 0;endY = 0;startX = 0;startY = 0;
}
}
//-->
</SCRIPT>
<div id="d" style="position:absolute;display:none;z-index:2"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function load(){
fCreateTable(true);
document.body.appendChild(document.createElement("<br>"));
}
function fCreateTable(flag){
var tb = document.createElement("table");
tb.cellPadding = "0";
tb.cellSpacing = "0";
tb.border = "1px solid #cccccc";
if(flag) tb.id = "myTb1";else tb.id = "myTb0";
for(var i=0;i<r;i++){
var row = tb.insertRow(i);
for(var j=0;j<c;j++){
var cell = row.insertCell(j)
if(flag) cell.innerText = i*c+j;else cell.innerHTML = "&nbsp;";
cell.style.width = cWidth + "px";
cell.style.height = cWidth + "px";
cell.style.position = "relative";
//cell.style.border = "1px solid #cccccc"
}
}
document.body.appendChild(tb);
}
// 合并function
function MergeCell(){
tdArrObj = new Array();
var minRow = r-1; maxRow = 0; minCell = c-1; maxCell = 0;
var tdList = document.getElementById("myTb1").getElementsByTagName("td");
for(var i=0;i<tdList.length;i++){
if(tdList[i].bgColor == selectedBgColor){
// 将被选中的单元格放到数组
tdArrObj[tdArrObj.length] = tdList[i];
// 找出被选中的开始行和结束行, 开始列和结束列
if(tdList[i].cellIndex<minCell) minCell = tdList[i].cellIndex;
if(tdList[i].cellIndex>maxCell) maxCell = tdList[i].cellIndex;
if(tdList[i].parentElement.rowIndex<minRow) minRow = tdList[i].parentElement.rowIndex;
if(tdList[i].parentElement.rowIndex>maxRow) maxRow = tdList[i].parentElement.rowIndex;
}
}
if(tdArrObj.length>1){
// 更改第一个cell的colspan,rowspan,bgcolor属性
tdArrObj[0].colSpan = maxCell - minCell +1 ;
tdArrObj[0].rowSpan = maxRow - minRow +1 ;
tdArrObj[0].bgColor = "#ffffff";
var  s = tdArrObj[0].innerText;
// 数组的其余cell全部删除
for(var i=1;i<tdArrObj.length;i++){
tdArrObj[i].bgColor = "#ffffff";
tdArrObj[i].parentElement.removeChild(tdArrObj[i]);
}
}
}//-->
</SCRIPT>
<body onload="load()" onselectstart="return false" style="cursor:pointer;">
<!-- Drop 方式: &nbsp;<select onchange="DropType = this.value"><option value="0">按表格1顺序</option><option value="1">鼠标当前单元格逐行</option><option value="2" selected>鼠标当前单元格相对表格1的顺序</option></select> -->
<INPUT TYPE="button" value="合并" onclick="MergeCell()">
<br><br>
</body>