关于动态合并表格单元格不正常的有关问题，请指点一下。附上自己的代码

关于动态合并表格单元格不正常的问题，请各位高手指点一下。附上自己的代码
昨晚彻夜工作，几乎崩溃，想要动态操作一个表格，单元格里面含有inputbox，目的是当用户单击第一行中的单元格时，能够合并单元格，可是第一个问题是：合并后表格变异了，伸出一块；第二个问题是inputbox中的值想要传到第一个中却很不稳定，有时行，有时就不行；第三个问题当多次点击合并单元格按钮后，更异常。求教大侠们第一个在我的思路基础上能修改好吗？或者有更巧妙地思路，比如我就想通过颜色选择记录每次选择的单元格。

下面是我的代码：两个，一个主文件，一个js

主文件
<!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=utf-8" />
<script src="controltable3.js"></script>
<style>
table,th,td{
border:1px solid black;}
</style>
</head>

<body>

<div id="myform">
<form method="POST">


<div id="div_myTable">
<table id="myTable">

  <tr id="myTH1" >
  <td > 1</td>

  <td ><input type="text" id="1-1" size="4" onclick="listnTextbox(id)"/></td>
  <td ><input type="text" id="2-1" size="10" onclick="listnTextbox(id)"/></td>
  <td ><input type="text" id="3-1" size="10" onclick="listnTextbox(id)"/></td>
  <td ><input type="text" id="4-1" size="10" onclick="listnTextbox(id)"/></td>
  <td ><input type="text" id="5-1" size="10" onclick="listnTextbox(id)"/></td>
  <td ><input type="text" id="6-1" size="10" onclick="listnTextbox(id)"/></td>
  <td ><input type="text" id="7-1" size="10" onclick="listnTextbox(id)"/></td>
  <td ><input type="text" id="8-1" size="10" onclick="listnTextbox(id)"/></td>

  </tr>
  <tr id="myTH2">
  <td > 2</td>
  <td ><input type="text" id="1-2" size="4" /></td>
  <td ><input type="text" id="2-2" size="10" /></td>
  <td ><input type="text" id="3-2" size="10" /></td>
  <td ><input type="text" id="4-2" size="10" /></td>
  <td ><input type="text" id="5-2" size="10" /></td>
  <td ><input type="text" id="6-2" size="10" /></td>
  <td ><input type="text" id="7-2" size="10" /></td>
  <td ><input type="text" id="8-2" size="10" /></td>

  </tr>

</table>
</div>

<input type="submit" value="提交" name="B1"/><INPUT type="reset" value="重置" name="B2"/>

<input type="button" name="button" id="button" value="合并选定的单元格"  onclick="colsmerge()"/>
</form>
</div>

</body>
</html>

//------------------------以下为合并单元格--js文件--------------------------------------------//
controltable3.js文件如下：
function getbyid(x){//自制的getElementById
return(document.getElementById(x));
}

var selBoxCols=new Array; //存放了被选择的textbox的数字型索引号中代表"列号"的值
//整整耗费了几个小时时间，原来鼠标事件是可以把元素id作为参数直接传过来的
function listnTextbox(textboxid){  //textboxid的格式是"列编号-行编号"，字符型

getbyid(textboxid).style.backgroundColor="#99ff99";//右键选择后改变背景色"#99ff99"
a=textboxid.split("-");//拆分textboxid，a[0]代表列号，parseInt(a[0]转为数字后才能作为元素的索引

selBoxCols.push(parseInt(a[0]));//a[0]代表id中"列编号"，每叫一次函数，增加一个元素

}

function numcompare(a,b){
return a-b;}

function colsmerge(){
y=selBoxCols.sort(numcompare);//对于数字型元素的排序方法必用。新数组y()
var c=getbyid("myTH1").cells;

first=getbyid(y[0]+"-"+1); //构造被选第一个textbox
var num=y[y.length-1]-y[0]+1;//摈除了重复元素的实际数目。length是选定的单元格虚数，含有重复，临时用此句法，还是应该检测用户选择，过滤掉重复选择。另外在数组中去掉重复元素也是一种办法。幸好此处索引下标是数字，可用此勉强解决问题
if (num==1) return;
var w=c[y[0]].colSpan;
if (w>1) c[y[0]].colSpan=num+w-1;
else c[y[0]].colSpan=num;  //此举就是合并单元的语法；c[y[0]]代表被选择的第一个单元格
first.size=num*first.size*1.31; //这是调试出来的一个奇怪的数字，不知因何
//first.setAttribute("size",23);
first.style.backgroundColor="";
for(i=1;i<y.length;i++){
j=y[i]+"-"+1;      //构造textbox的id值j
//first.value+=getbyid(j).value;//合并文字内容到第一个中,总是不稳定，如果数组中有重复会重复加？？？？？？？？？？？？？
var eleTxt=getbyid(j);
if(eleTxt) eleTxt.parentNode.removeChild(eleTxt);//删除已没有存在必要的input-textbox，语法如此，不得不这样绕弯子
}

selBoxCols=[];//完成合并后需要清空数组
y=[];

//----测试片段
//if (!first) alert("错了！"+first+"无值。");
//else alert("判断有无value属性："+first.hasAttributes("value"));
//----测试片段结束

}

------解决方案--------------------

关于动态合并表格单元格不正常的有关问题，请指点一下。附上自己的代码

相关推荐