小妹有一个很复杂的三级动态表格的级联新增需要帮忙，大哥哥们快来帮帮小妹啊！！

<!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=gb2312" />
<title>无标题文档</title>
</head><body>
<table width="676" border="1">
  <tr>
    <td width="128" bgcolor="#CCCCCC"><div align="center">最大大项</div></td>
    <td width="117" bgcolor="#CCCCCC"><div align="center">次大项目</div></td>
    <td width="149" bgcolor="#CCCCCC"><div align="center">小项</div></td>
    <td width="264" bgcolor="#CCCCCC"><p align="center">细则</p>    </td>
  </tr>
  <tr>
    <td rowspan="6"><div align="center">一、asasas</div></td>
    <td rowspan="2">1、s</td>
    <td height="38"><p>(1)</p>    </td>
    <td>dddddd</td>
  </tr>
  <tr>
    <td height="38">(2)</td>
    <td>tttttt</td>
  </tr>
  <tr>
    <td rowspan="4">2、ss</td>
    <td height="33">(1)</td>
    <td><p>aaaaa(跟小项一行，同时增加到次大项目下面</p>
    <p>)</p></td>
  </tr>
  <tr>
    <td height="28">(2)</td>
    <td>aaaa</td>
  </tr>
  <tr>
    <td height="29">(3)</td>
    <td>ddd</td>
  </tr>
  <tr>
    <td height="29">(4)可以任意动态新增行</td>
    <td>　</td>
  </tr>
  <tr>
    <td rowspan="4"><div align="center">二、ttt</div></td>
    <td height="70" rowspan="3">1、ss</td>
    <td height="33">(1)可以随便录入东西</td>
    <td>t</td>
  </tr>
  <tr>
    <td height="48">(2)d</td>
    <td>f</td>
  </tr>
  <tr>
    <td height="48">(3)d</td>
    <td>dd</td>
  </tr>
  <tr>
    <td height="68">2、ddd</td>
    <td>(1)sssss</td>
    <td>dddd</td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    知道你什么意思了。
    哈哈，先给你一个提示。
    小项和细则，不要都用一个新的table,做成一个tr就好了。
      

  2.   

    修改了你的一些地方，主要给你一个思路，没有加入控制逻辑。其实，你原来的做法也可以做下去。你只是自己也找不到了单元格的坐标。
    就整理了一下，主要思路，
    1。就是只是使用一行。当然，你使用table，也可以，个人觉得很麻烦，不想用。
    2。利用cell单位的rowSpan属性。 // 增最大项目
    function zxm(){ for(var i=1;i <xiangmubiao.rows.length;i++){
    if(xiangmubiao.rows(i).bgColor=="#99cccc"){
    xiangmubiao.rows(i).bgColor="#FFFFFF";
    }
    } n=xiangmubiao.rows.length;
    r=xiangmubiao.insertRow();
    r.oncontextmenu=Click_Handle;
    r.onclick=Click_Handle;
    //最大项目
    c=r.insertCell();
    c.width=15;
    c.innerHTML="<textarea name='xm"+n+"' rows='3' cols='10'  style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'> </textarea>"; //次大项
    c=r.insertCell();
    c.width=15;
    c.innerHTML="<textarea  name='zx"+n+"1' rows='3' cols='20' style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'> </textarea>"; //小项
    c=r.insertCell();
    c.width=15;
    c.innerHTML="<textarea name='xx"+n+"11' rows='3' cols='30' style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'> </textarea>";
    //细则
    c=r.insertCell();
    c.innerHTML="<textarea name='xz"+n+"11' rows='3' cols='30'  style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'> </textarea>"; document.frm.xmbrow.value=n;
    } // 增次大项目
    function zzx(){
    xiangmubiao.rows(parseInt(document.frm.xmbrow.value)).cells(0).rowSpan += 1;

    n=xiangmubiao.rows.length;
    r=xiangmubiao.insertRow(parseInt(document.frm.xmbrow.value) + 1); //次大项
    c=r.insertCell();
    c.width=15;
    c.innerHTML="<textarea  name='zx"+n+"1' rows='3' cols='20' style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'>2 </textarea>"; //小项
    c=r.insertCell();
    c.width=15;
    c.innerHTML="<textarea name='xx"+n+"11' rows='3' cols='30' style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'>2</textarea>";
    //细则
    c=r.insertCell();
    c.innerHTML="<textarea name='xz"+n+"11' rows='3' cols='30'  style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'>2</textarea>"; } // 增小项
    function zxx(){
    // 最大项目
    xiangmubiao.rows(parseInt(document.frm.xmbrow.value)).cells(0).rowSpan += 1;
    // 次大项
    xiangmubiao.rows(parseInt(document.frm.xmbrow.value)).cells(1).rowSpan += 1;

    n=xiangmubiao.rows.length;
    r=xiangmubiao.insertRow(parseInt(document.frm.xmbrow.value) + 1);

    //小项
    c=r.insertCell();
    c.width=15;
    c.innerHTML="<textarea name='xx"+n+"11' rows='3' cols='30' style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'>3</textarea>";

    //细则
    c=r.insertCell();
    c.innerHTML="<textarea name='xz"+n+"11' rows='3' cols='30'  style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'>3</textarea>";
    }
      

  3.   

    我做了下哦,现在有个问题,就是新增小项和细则的时候,不是在我选的的次大项目下面添加,而只是在每一个最大项目下的第一个次大项目下面添加小项和细则,即不是在当前选择的次大项目下添加,我javascript不太好,请再帮帮忙,谢谢!!
      

  4.   

    1.正确
    2.增次大项目时，在自己选中的这一行下面另起一行，追加新的一行（现在这边在增加了小项目后，在增次大项目有点bug,格式乱了）
    3.增小项的时候，是自己选中的该次大项目下面，追加新的一行。（注：是选中的次大项目下面增加小项和细则，而不是默认第一行增加）谢谢，
      

  5.   

    我做了一个都是在当前选中的地方下面追加的例子。<html>
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
    <script language="javascript">
    <!--
    function qqset(){
    mmm=xiangmubiao.rows.length-1;
      for(var i=1;i <=mmm;i++){
        xiangmubiao.rows(i).onclick=Click_Handle;
        xiangmubiao.rows(i).oncontextmenu=Click_Handle;
       }
        document.frm.xmbrow.value=mmm;
    }

    qqset();

    function closeprnmenu(){
    document.all.prn.style.display="none";
    }

    function prnmenu(){
    document.all.prn.style.display="";
    document.all.prn.style.left = event.clientX;
    document.all.prn.style.top = event.clientY;
    }

    function Click_Handle(){
    var oElement=event.srcElement;
    var iRowIndex=oElement.rowIndex;
    if (oElement.tagName == "TEXTAREA"){
    oElement = oElement.parentElement;
    }
    oElement = oElement.parentElement;
    iRowIndex=oElement.rowIndex;

    var curRowIndex = parseInt(document.frm.xmbrow.value);
    if (curRowIndex > 0){
    xiangmubiao.rows(curRowIndex).bgColor="#FFFFFF";
    }

    this.bgColor="#99cccc";

    document.frm.xmbrow.value=iRowIndex;
    } function fuwei(){
    for(var i=1;i <xiangmubiao.rows.length;i++){
    if(xiangmubiao.rows(i).bgColor=="#99cccc"){
    xiangmubiao.rows(i).bgColor="#FFFFFF";
    }
    }
    } function insertNewLine(insertMode){

    var curRowIndex = parseInt(document.frm.xmbrow.value);
    var n=xiangmubiao.rows.length; xiangmubiao.rows(curRowIndex).bgColor="#FFFFFF";

    if (insertMode < 3){
    var curOK = false;
    for (var l=curRowIndex+1;l<=n-1 && l > 0;l++){
    if (xiangmubiao.rows(l).cells.length == 4 || (xiangmubiao.rows(l).cells.length == 3 && insertMode == 2)){
    curRowIndex = l-1;
    curOK = true;
    break;
    }
    }
    if (curOK == false && curRowIndex > 0){
    curRowIndex = n;
    }
    } if (insertMode > 1){
    var flgUnion3 = false;
    if (insertMode == 2){
    flgUnion3 = true;
    }
    var flgUnion4 = false;
    var iLoop = curRowIndex; while (flgUnion3 == false || flgUnion4 == false ){
    if (xiangmubiao.rows(iLoop).cells.length == 3){
    if (flgUnion3 == false){
    xiangmubiao.rows(iLoop).cells(0).rowSpan += 1;
    flgUnion3 = true;
    }
    }
    if (xiangmubiao.rows(iLoop).cells.length == 4){
    if (flgUnion3 == false){
    xiangmubiao.rows(iLoop).cells(1).rowSpan += 1;
    flgUnion3 = true;
    }
    xiangmubiao.rows(iLoop).cells(0).rowSpan += 1;
    flgUnion4 = true;
    }
    iLoop--;
    }
    } r=xiangmubiao.insertRow(curRowIndex + 1);
    r.oncontextmenu=Click_Handle;
    r.onclick=Click_Handle;

    // 最大项目
    if (insertMode < 2){
    c=r.insertCell();
    c.width=15;
    c.innerHTML="<textarea name='xm"+n+"' rows='3' cols='10'  style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'>"+n+"</textarea>";
    }

    //次大项
    if (insertMode < 3){
    c=r.insertCell();
    c.width=15;
    c.innerHTML="<textarea  name='zx"+n+"1' rows='3' cols='20' style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'>"+n+"</textarea>";
    } // 小项&细则
    if (insertMode < 4){
    // 小项
    c=r.insertCell();
    c.width=15;
    c.innerHTML="<textarea name='xx"+n+"11' rows='3' cols='30' style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'>"+n+"</textarea>"; // 细则
    c=r.insertCell();
    c.innerHTML="<textarea name='xz"+n+"11' rows='3' cols='30'  style='border-top:0px;border-right:0px;border-bottom:0px;border-left:0px;'>"+n+"</textarea>";
    }
    }

    // 增最大项目
    function zxm(){
    insertNewLine(1);
    }

    // 增次大项目
    function zzx(){
    insertNewLine(2);
    }

    // 增小项
    function zxx(){
    insertNewLine(3);
    }
    // -->
    </script>
    </HEAD>
    <body topmargin="5" onload="javascript:qqset();" oncontextmenu="javascript:prnmenu();return false;" onclick="javascript:closeprnmenu();">
    <form method="post" name="frm" action="">
    <table border="1" width="95%" bordercolorlight="#800000" bordercolordark="#FFFFFF" cellspacing="0" cellpadding="0" name="xiangmubiao" id="xiangmubiao" class="dontprn">
    <tr>
    <td align="center" width="90" bgcolor="#CCCCFF"> <font color="#800000"><span style="font-size: 9pt">最大项目 </span> </font> </td>
    <td align="center" width="80" bgcolor="#CCCCFF"> <font color="#800000"><span style="font-size: 9pt">次大项 </span> </font> </td>
    <td align="center" width="120" bgcolor="#CCCCFF"> <font color="#800000"><span style="font-size: 9pt">小项 </span> </font> </td>
    <td align="center" width="120" bgcolor="#CCCCFF"> <font color="#800000"><span style="font-size: 9pt">细项 </span> </font> </td>
    </tr>
    <input type="text" name="xmbrow" value="0">
    <table name="mxlbinput" id="mxlbinput" border='1' cellpadding='0' cellspacing='0' bordercolordark='#ffffff' bordercolorlight='#999999' width='100%' height="19" style="display:none"> </table>
    </form>
    </center>
    <center>
    <div style="display:none;position: absolute; width: 53px; height: 85px; z-index: 1; left: 691px; top: 421px" id="prn" class="dontprn">
    <table border="1" cellspacing="0" cellpadding="0" bordercolorlight="#006600" bordercolordark="#FFFFFF" bgcolor="#CCCCFF"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0" width="38" style="word-wrap: break-word">
    <tr> <td align="center" onClick="zxm();" style="cursor:hand;"> <font onmouseover="this.color='green'" onmouseout="this.color='black'">增最大项目 </font> </td> </tr>
    <tr> <td height="5"> </td> </tr>
    <tr> <td align="center" onClick="zzx();" style="cursor:hand;"> <font onmouseover="this.color='green'" onmouseout="this.color='black'">增次大项目 </font> </td> </tr>
    <tr> <td height="5"> </td> </tr>
    <tr> <td align="center" onClick="zxx();" style="cursor:hand;"> <font onmouseover="this.color='green'" onmouseout="this.color='black'">增小项 </font> </td> </tr>
    <tr> <td style="cursor:default;" height="3"> <hr color="#FFFFFF" style="border: 1px groove #FFFFFF" height="3"> </td> </tr>
    </table> </td> </tr> </table> </div>
    </body>
    </html>
      

  6.   

    前两天忙，没来，不好意思，哪个我看了下，还是有点点bug，呵呵~~，我调调~~，还是先谢谢你Croatia  
       
     
      

  7.   

    看了小妹的代码，推断小妹定是美女，只有美女才写得出如此强悍——不，是剽悍的html和javascript！！
      

  8.   

    点击的时候把 CELL的索引传递过去。