对表格动态操作

<html><head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head><body><script>
function merge()
{
var str;
str="<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse: collapse\" bordercolor=\"#111111\" width=\"100%\">";
str+="<tr><td width=\"50%\">d </td><td width=\"50%\"></td></tr>";
str+="<tr><td width=\"50%\"> d</td><td width=\"50%\"></td></tr>";
  str+="<tr><td width=\"50%\"> d</td><td width=\"50%\" rowspan=\"2\"></td></tr>";
  str+="<tr><td width=\"50%\">d </td></tr>";
  str+="<tr><td width=\"50%\"> d</td><td width=\"50%\"></td></tr>";
str+="</table>";
one.innerHTML=str;}
</script>
<span id=one>
<table id=tb border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
  <tr>
    <td width="50%">　</td>
    <td width="50%">　</td>
  </tr>
  <tr>
    <td width="50%">　</td>
    <td width="50%">　</td>
  </tr>
  
  <tr>
    <td width="50%">　</td>
    <td width="50%">　</td>
  </tr>
  <tr>
    <td width="50%">　</td>
    <td width="50%">　</td>
  </tr>
  
  <tr>
    <td width="50%">　</td>
    <td width="50%">　</td>
  </tr>
</table>
</span>
<input type=button value=changed onclick="merge()">
</body></html>

解决方案 »

  1.   

    谢谢fzel_net(kenshin)的关注：
       不过你的方法只是重新生成表格，我希望的是在保证原表格不变的情况下更改。因为在具体的应用里，有一个n行的表格，我一次可能合并其中的几个，如2行到3行的合并，同时5行到8行的合并，然后在合并后的单元格内填写内容。
       这样又该怎么做呢？
    请继续关注！
      

  2.   

    zgpp，到底该怎么合并呀？解说一下呀
      

  3.   

    <html><head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body><script>  
    function doTab(){  
    x1=col1.value-1;  
    x2=col2.value-1;  
    y1=row1.value-1;  
    y2=row2.value-1;  
    if (x1==x2 && y1==y2) return;  
    htmlstr="";  
    xspan=0;
    yspan=0;
    for (i=x1;i<=x2;i++) xspan+=list.rows[y1].cells[i].colSpan;
    for (i=y1;i<=y2;i++) yspan+=list.rows[i].cells[x1].rowSpan;

    for (i=y1;i<=y2;i++) { 
    htmlstr+="<br/>"; 
     
    for(j=x1;j<=x2;j++){  
    htmlstr+=list.rows[i].cells[j].innerHTML;  

    }
    } 
    htmlstr=htmlstr.substr(5); 
    for (i=y1;i<=y2;i++){ 
    j=x1; 
    while (j<x2){ 
        list.rows[i].deleteCell(x1); 
        j++; 
    } 
        list.rows[i].cells[x1].colSpan=xspan;
    }
    for (i=y2;i>y1;i--){
    list.rows[i].deleteCell(x1);
    }
    list.rows[y1].cells[x1].rowSpan=yspan;
    list.rows[y1].cells[x1].innerHTML=htmlstr; 
    //alert(htmlstr);  
    }  
    function tabStart(){  
        obj=window.event.srcElement;  
        col1.value=obj.cellIndex;  
        col2.value=col1.value;  
        row1.value=obj.parentElement.rowIndex;  
        row2.value=row1.value;  
    }  
    function tabEnd(){  
        obj=window.event.srcElement;  
        col2.value=obj.cellIndex;  
        row2.value=obj.parentElement.rowIndex;  
    }  yspan=0;
    times=0;
    rows =new Array();
    rows[0] = new Array(); //存row1
    rows[1] = new Array(); //存row2
    rows[2] = new Array(); //存yspanfunction merge(row1,col1,content)
    {
    x1=col1;
    y1=row1;
    htmlstr="";
    htmlstr = list.rows[y1].cells[x1].innerHTML;
    if(htmlstr=="" || htmlstr=="&nbsp;")
    htmlstr=htmlstr+content;
    else
    htmlstr=htmlstr+"<br/>"+content;

    list.rows[y1].cells[x1].innerHTML=htmlstr;
    list.rows[y1].cells[x1].style.background="#FFFFCC";
    alert(htmlstr);}  
    </script>
    <table border="1" width="100%" id=list onmousedown=tabStart() onmouseup=tabEnd()>
      <tr>
        <td width="25%">111</td>
        <td width="25%">111</td>  </tr>
      <tr>
        <td width="25%">222</td>
        <td width="25%">&nbsp;</td>  <tr>
        <td width="25%">&nbsp;</td>
        <td width="25%">&nbsp;</td>
      
      </tr>
      <tr>
        <td width="25%">&nbsp;</td>
        <td width="25%">&nbsp;</td>
       
      </tr>
      <tr>
        <td width="25%">&nbsp;</td>
        <td width="25%">&nbsp;</td>
      
      </tr>
      <tr>
        <td width="25%">&nbsp;</td>
        <td width="25%">&nbsp;</td>
       
      </tr>      
    </table>
    <p>从第<input type="text" name="col1" size="4">列到第<input type="text" name="col2" size="4">列&nbsp;&nbsp;&nbsp;   
    从第<input type="text" name="row1" size="4">行到第<input type="text" name="row2" size="4">行<input type="button" value="合并" onclick=doTab()>
    <input type="button" value="合并(1,2,t)" onclick=merge(1,1,'tst')><input type="button" value="合并(2,0,'2,4')" onclick=merge(2,0,'2,4')>
    </p>  
    </body></html>