使用按钮添加多个表格项

当然可以啊,动态添加就可以了

解决方案 »

  1.   

    晕倒,本人菜鸟,当然也知道动态添加,问题是动态添加一个元素是可以,我要添加一组,怎么样写呢?说明白点好啊.
      

  2.   

    每次点击添加一个只有一行多列的表格。详细的表格行列数可以自己设置<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
    <head>
    <title>Untitled</title>
    <script type='text/javascript'>
    function fncAdd_tr()
    {
    var strHtml='';
    var i=Number(document.all.hdn.value);
    var count1=10+parseInt(i)*3;
    var count2=11+parseInt(i)*3;
    var count3=12+parseInt(i)*3;
    strHtml = "<table width='100%' border='1' style='border-top:0px;margin-top:-1;' cellpadding='0' cellspacing='0' bordercolor='#6699FF'  id='tr_end'><tr><th scope='row'><select name='"+count1+"'><option value='aaa' selected>aaa</option><option value='bbb'>bbb</option><option value='ccc'>ccc</option></select></th><td><div align='center'><select name='"+count2+"'><option value='aaa' selected>aaa</option><option value='bbb'>bbb</option><option value='ccc'>ccc</option></select></div></td><td><div align='center'><select name='"+count3+"'><option value='aaa' selected>aaa</option><option value='bbb'>bbb</option><option value='ccc'>ccc</option></select></div></td></tr></table>";
    if (i==0){
    document.all.tr_end.insertAdjacentHTML('AfterEnd',strHtml);
    }
    else
    { document.all.tr_end[i].insertAdjacentHTML('AfterEnd',strHtml);}
    document.all.hdn.value=parseInt(document.all.hdn.value)+1;
    }
    function fncClear()
    {
    document.all.hdn.value=0;
    }</script>
    </head><body><table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#6699FF"  id="tr_end">
      <tr>
        <th scope="col">区号</th>
        <th scope="col">部号</th>
        <th scope="col">&#32452;号</th>
      </tr>
      <tr>
        <th scope="row"><select name="select" title="a">
          <option title="a" value="aaa" selected>aaa</option>
          <option title="a" value="bbb">bbb</option>
          <option title="a" value="ccc">ccc</option>
                        </select></th>
        <td><div align="center">
          <select name="select2">
            <option value="aaa" selected>aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
          </select>
        </div></td>
        <td><div align="center">
          <select name="select3">
            <option value="aaa" selected>aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
          </select>
        </div></td>
      </tr>
      <tr>
        <th scope="row"><select name="select4">
          <option value="aaa" selected>aaa</option>
          <option value="bbb">bbb</option>
          <option value="ccc">ccc</option>
        </select></th>
        <td><div align="center">
          <select name="select5">
            <option value="aaa" selected>aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
          </select>
        </div></td>
        <td><div align="center">
          <select name="select6">
            <option value="aaa" selected>aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
          </select>
        </div></td>
      </tr>
      <tr>
        <th scope="row"><select name="select8">
          <option value="aaa" selected>aaa</option>
          <option value="bbb">bbb</option>
          <option value="ccc">ccc</option>
        </select></th>
        <td><div align="center">
          <select name="select7">
            <option value="aaa" selected>aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
          </select>
        </div></td>
        <td><div align="center">
          <select name="select9">
            <option value="aaa" selected>aaa</option>
            <option value="bbb">bbb</option>
            <option value="ccc">ccc</option>
          </select>
        </div></td>
      </tr>
      </table>
      <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#6699FF" style="border-top:0px;margin-top:-1;">
      <tr>
        <th><input type="submit" name="Submit2" value="提交"> 
          <input name="Submit22" type="reset" value="添加区部&#32452;" onclick="fncAdd_tr()"></th>
        </tr>
     </table>
     <input type='text' name='hdn' value="0"></body>
    </html>