js动态实现表格的合并问题请教

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
t1.html
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script type="text/javascript">
function createTable(){
var strReturnValue = window.showModalDialog("t2.html",window,"resizable:yes;scrollbars:no;status:no;help:no;dialogWidth:330px;dialogHeight:230px");
//alert(strReturnValue);
//得到行数和列数的值
var indexOpera=strReturnValue.indexOf("_");
var trNum=strReturnValue.substring(0,indexOpera);
var tdNum=strReturnValue.substring(indexOpera+1);

//动态创建表格
var newTable=document.createElement("table");
var newTbody=document.createElement("tbody"); newTable.setAttribute("border","1");
//newTable.setAttribute("width","200");
//newTable.setAttribute("height","500");
newTable.setAttribute("align","center");
for(var i=1;i<=trNum;i++){
var row=document.createElement("tr");

for(var j=1;j<=tdNum;j++){
var cell=document.createElement("td");
var textValue=document.createTextNode("第"+i+"行第"+j+"列");
cell.setAttribute("id","td"+j);
cell.appendChild(textValue);
row.appendChild(cell);
}
newTbody.appendChild(row);
}
newTable.appendChild(newTbody);
var div=document.getElementById("table1");
div.appendChild(newTable);
} function uniteTable(){
alert("合并表格");
}
</script>
</HEAD> <BODY>
<input type="button" value="创建表格" onclick="createTable();"/><BR>
<input type="button" value="合并表格" onclick="uniteTable();"/><BR>
<table border="1">
<tr>
<td>从第<input type="text" id="fisrtRow"/>行</td>
<td>到第<input type="text" id="endRow"/>行</td>
<td rowspan="2"><input type="button" value="合并"></td>
</tr>
<tr>
<td>从第<input type="text" id="fisrtCell"/>列</td>
<td>到第<input type="text" id="endCell"/>列</td>

</tr>
</table>
<div  id="table1">
</div>
</BODY>
</HTML>
t2.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD>
<script>
function cancle(){
window.close();
}
</script> <BODY>
<table>
<tr>
<td>行数:<input type="text" id="inputTr"/></td>
<td>列数:<input type="text" id="inputTd"/></td><tr>
<tr>
<td>
<input type="button" value="确定" onclick="getValue()">
</td>
    <td>
<input type="button" value="取消" onclick="cancle();"/>
</td>
</tr>
</table>
<script> function getValue(){ var getTr=document.getElementById("inputTr").value;
//if(!isNaN(getTr)){
// alert("请您输入数字");
//}
var getOperate="_";
var getTd=document.getElementById("inputTd").value;
window.parent.returnValue=getTr+getOperate+getTd;
window.close();

}
</script>
</BODY>
</HTML>
很久以前写的了，看看能不能用吧<input type=button value="click" onclick="mergeCell('tab1',3,2)">

<TABLE border=1 id=tab1 width="52%">
  <TR align="center">
    <TD width="12%">A</TD>
    <TD width="12%">B</TD>
    <TD width="12%">C</TD>
    <TD width="12%" id="d11">D1</TD>
    <TD width="13%" id="d12">D1</TD>
    <TD width="13%" id="d13">D1</TD>
    <TD width="13%">D2</TD>
    <TD width="13%">D2</TD></TR>
  <TR align="center">
    <TD width="12%">A</TD>
    <TD width="12%">B</TD>
    <TD width="12%">C</TD>
    <TD width="12%">E1</TD>
    <TD width="13%">E1</TD>
    <TD width="13%">E3</TD>
    <TD width="13%">E4</TD>
    <TD width="13%">E5</TD></TR>
  <TR>
    <TD width="12%" align="center">A1</TD>
    <TD width="12%" align="center">B1</TD>
    <TD width="12%" align="center">C1</TD>
    <TD width="12%">1</TD>
    <TD width="13%">2</TD>
    <TD width="13%">3</TD>
    <TD width="13%">4</TD>
    <TD width="13%">5</TD></TR>
  <TR>
    <TD width="12%" align="center">A1</TD>
    <TD width="12%" align="center">B1</TD>
    <TD width="12%" align="center">C2</TD>
    <TD width="12%">1</TD>
    <TD width="13%">2</TD>
    <TD width="13%">3</TD>
    <TD width="13%">4</TD>
    <TD width="13%">5</TD></TR>
  <TR>
    <TD width="12%" align="center">A1</TD>
    <TD width="12%" align="center">B2</TD>
    <TD width="12%" align="center">C2</TD>
    <TD width="12%">1</TD>
    <TD width="13%">2</TD>
    <TD width="13%">3</TD>
    <TD width="13%">4</TD>
    <TD width="13%">5</TD></TR>
  <TR>
    <TD width="12%" align="center">A1</TD>
    <TD width="12%" align="center">B2</TD>
    <TD width="12%" align="center">C4</TD>
    <TD width="12%">1</TD>
    <TD width="13%">2</TD>
    <TD width="13%">3</TD>
    <TD width="13%">4</TD>
    <TD width="13%">5</TD></TR>
  <TR>
    <TD width="12%" align="center">A2</TD>
    <TD width="12%" align="center">B3</TD>
    <TD width="12%" align="center">C5</TD>
    <TD width="12%">1</TD>
    <TD width="13%">2</TD>
    <TD width="13%">3</TD>
    <TD width="13%">4</TD>
    <TD width="13%">5</TD></TR>
  <TR>
    <TD width="12%" align="center">A2</TD>
    <TD width="12%" align="center">B3</TD>
    <TD width="12%" align="center">C6</TD>
    <TD width="12%">1</TD>
    <TD width="13%">2</TD>
    <TD width="13%">3</TD>
    <TD width="13%">4</TD>
    <TD width="13%">5</TD></TR>
  <TR>
    <TD width="12%" align="center">A2</TD>
    <TD width="12%" align="center">B3</TD>
    <TD width="12%" align="center">C7</TD>
    <TD width="12%">1</TD>
    <TD width="13%">2</TD>
    <TD width="13%">3</TD>
    <TD width="13%">4</TD>
    <TD width="13%">5</TD></TR>
</TABLE><SCRIPT language=JavaScript>
//合并表格类型单元格 leftCols:左边需合并的列数，topRows:顶部需合并的行数
function mergeCell(tableName,leftCols,topRows)
{
var table_obj=eval(tableName);
var hidden_count = 0;
//隐藏空列
for ( var i=leftCols-1; i>=0 ; i-- )
{
var flag = false;
for ( var j=topRows; j<table_obj.rows.length ; j++)
{
// alert(":"+ table_obj.rows[j].cells[i].innerText +":");
if ( table_obj.rows[j].cells[i].innerText != "　") break;
if (j == table_obj.rows.length -1) {
for ( var k=0; k<table_obj.rows.length ; k++)
{
table_obj.rows[k].deleteCell(i);
// table_obj.rows[k].cells[i].style.display = "none";
}
hidden_count++;
}
}
}
//合并列表头 top
for(i = topRows-1; i>=0; i--)
{
var nowCell;
for(var j = table_obj.rows[i].cells.length - 2; j>=0; j--)
{
nowCell = table_obj.rows[i].cells[j];
//判断当前格与其右侧单元格的纵向祖先是否完全相同
var flag = false;
for(var k=i; k>=0; k--) {
if(table_obj.rows[k].cells[j].innerText != table_obj.rows[k].cells[j+1].innerText) break;
if(k == 0) flag = true;
}
if(flag) {
nowCell.colSpan = table_obj.rows[i].cells[j+1].colSpan +1;
// alert(nowCell.colSpan+" \n "+ nowCell.outerHTML +"\n"+ table_obj.rows[i].cells[j+1].outerHTML);
table_obj.rows[i].deleteCell(j+1);
}
else nowCell = table_obj.rows[i].cells[j-1];
}
}
//合并行表头 left
for(var i=(leftCols -hidden_count -1);i>=0;i--)
{
var nowRow;
for(var j = table_obj.rows.length -2; j>=topRows; j--)
{
nowRow = table_obj.rows[j];
if(nowRow.cells[i].style.display != "none") {
//判断当前格与其下方单元格的横向祖先是否完全相同
var flag = false;
for(var k=i; k>=0; k--) {
if(nowRow.cells[k].innerText != table_obj.rows[j+1].cells[k].innerText) break;
if( k == 0 ) flag = true;
}
if(flag) {
nowRow.cells[i].rowSpan = table_obj.rows[j+1].cells[i].rowSpan +1;
table_obj.rows[j+1].deleteCell(i);
}
else nowRow = table_obj.rows[j-1];
}
}
}
}
</SCRIPT>

调试易

js动态实现表格的合并问题请教

解决方案 »