http://msdn.microsoft.com/library/default.asp?url=/workshop/author/tables/buildtables.asp

解决方案 »

  1.   

    用的是DHTML,呵刚做过的一个项目中就有这种功能,呼呼~~~
      

  2.   

    zltostem(尘寞) ,能否说详细点
      

  3.   

    给你几个例子:
    这个是可以添加行,删除指定行的代码:<html>
    <head>
    <title>remove and add row</title>
    <STYLE TYPE="text/css">
    .LineTop        {
                        border-top:         1pt solid gray black;
                    }
    .LineBottom     {
                        border-bottom:      1pt solid black;
                    }
    .LineLeft       {
                        border-left:        1pt solid black;
                    }
    .LineRight      {
                        border-right:       1pt solid black;
                    }
    .TextNoLine{ border-width: 0;}</STYLE>
    <script type="text/javascript">
         var inputCount = 0;
         function addLine() {
              var objSource = window.event.srcElement;
              var currentTR, currentTD, currentSelect, temp;          inputCount++;
              while ( (objSource = objSource.parentElement)  && objSource.tagName !="TBODY");
              currentTR = objSource.insertRow();
              currentTD = currentTR.insertCell();
              currentTD.innerHTML = "<input type='text' size='10' name='items_"+inputCount+"' value=" + inputCount+ ">";
              currentTD = currentTR.insertCell();
              currentTD.align='left'
              currentTD.className="LineTop LineBottom LineLeft LineRight";
              currentTD.innerHTML = "<input type='text' size='10' name='value_0' class='TextNoLine' >";
              currentTD = currentTR.insertCell();
              currentTD.innerHTML = "<input type='Button' class='Button' onclick='removeLine()' value='Delete this line'>";
         }
         function removeLine() {
              var current = window.event.srcElement;
       
              while ( (current = current.parentElement)  && current.tagName !="TR");
                   current.parentElement.removeChild(current);
         }     
    </script></head><body><table bgcolor="#ffffff" border=0 cellspacing=1 cellpadding=3 id="myTable">
         <tr  valign=top>
              <th>
                   <br/>
                   <input type="button" class="Button" onclick="addLine()" value="add a row">
              </th>
              <th>
              </th>
              <th>
                   <br />
              </th>
         </tr>
         <tr valign=top>
              <td>
                   <input type="text" size="10" name="items_0" value="0"><br />
              </td>
              <td  class="LineTop LineBottom LineLeft LineRight">
                   <input type="text" size="10" class="TextNoLine" name="value_0">
              </td>
              <td>
                   <input type="Button" class="Button" onclick="removeLine()" value="Delete this line"><br />
              </td>
         </tr>
    </table></body>
    </html>-------------------------------------------这个是添加行,并且只能删除最后一样的代码:<head>
    <title>Shi's sample</title><script language="JavaScript">function addRowToTable()
    {
        var tbl = document.getElementById('tblSample');
        var lastRow = tbl.rows.length;
        var iteration = lastRow;    
        var row = tbl.insertRow(lastRow);
        
        var cellLeft = row.insertCell(0);
        var textNode = document.createTextNode(iteration);
        cellLeft.appendChild(textNode);
        
        var cellRight = row.insertCell(1);
        var el = document.createElement('input');
        el.setAttribute('type', 'text');
        el.setAttribute('name', 'txtRow' + iteration);
        el.setAttribute('size', '40');
        cellRight.appendChild(el);}
    function removeRowFromTable()
    {
        var tbl = document.getElementById('tblSample');
        var lastRow = tbl.rows.length;
        if (lastRow > 2) tbl.deleteRow(lastRow - 1);
    }</script>
    </head><body>
    <form action="tableaddrow_nw.html" method="get"><input type="button" value="Add" onclick="addRowToTable();" />
    <input type="button" value="Delete" onclick="removeRowFromTable();" />
    <table border="1" id="tblSample">
        <tr>
            <th colspan="2">Sample table</th>
        </tr>
        <tr>
            <td>1</td>
            <td width="60%"><input type="text" name="txtRow1" size="40" /></td>
            <td width="30%">&nbsp;</td>
        </tr>
    </table></form>
    </body>-----------------------------------------  以上都是在最后添加,对于可以在中间加,只需要在insertRow()的括号中换一个具体数值就可以了。就不必举例了~~~----------------------------------------  关于添加多行,就是将添加动作执行几次的问题,作循环就可完成---------------------------------------  关于上移:例如共5行,要移动到第3行,实际上就是将第3行的换成第5行的,同时将第4行的换成原来第3行的,第5行的换成原来第4行的即可~~~  关于下移:和上移相反的过程,但道理都是一样的。---------------------------------------  关于将数据保存到数据库中:控件的名称已经知道(创建的时候人为设定),取出其中的数据并不是一件难事, SQL语句插入或是修改,即可~~~  以上说的都是做法,目的是给楼主提供思路。楼主的要求实际上是几个把几个功能组合在一起的成果。分开来完成,会较容易一些 ...