下拉列表框与表格的动态增加问题

大侠们，我要做一个高级查询，即：选中下拉列表框中的内容后，选中的内容显示在动态增加的表格单元格中，下一次选中的内容又显示在单元格中，也就是每选中一项，表格增加一行，选中的项显示在增加的表格行中，怎么实现阿？？？各位侠客快帮帮我啊

解决方案 »

  1.   

    <html>
    <body>
    <select id="sel1" onchange="addTable(this.value)">
    <option value="AAA" selected>AAA</option>
    <option value="BBB" >BBB</option>
    <option value="CCC" >CCC</option>
    <option value="DDD" >DDD</option>
    <option value="EEE" >EEE</option>
    <option value="FFF" >FFF</option>
    </select><br><p>
    <table width="300" cellpadding="0" cellspacing="0" border="1" id="tbl1">
    <tr><td align="center">名称</td><td align="center">数量</td></tr>
    </table>
    <script>
    var tb1=document.getElementById("tbl1");
     function addTable(str){ if(tb1.lastChild.lastChild){
      var myNode=document.createElement("tr");
      var myChild1=makeNode("td",str);
      var myChild2=makeNode("td",str);
      myNode.appendChild(myChild1);
      myNode.appendChild(myChild2);
      tb1.lastChild.appendChild(myNode);
     }
     }
      function makeNode(node,text){
       var newNode=document.createElement(node);
       newNode.setAttribute("align","center");
       var newText=document.createTextNode(text);
       newNode.appendChild(newText);
       
       return newNode;
    }
    </script>
    </body>
    </html>
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    window.onload=function(){
    document.getElementById('mySelect').onchange=function(){
    var opt=this.options[this.selectedIndex];
    constructTr(opt.value,opt.text,document.getElementById('myTable'));
    }
    }
    function constructTr(v,t,c){
    var trs=c.getElementsByTagName('TR');
    for(var i=0;i<trs.length;i++){
    if(trs[i].id==v)return;
    }
    var tr=document.createElement('tr');
    tr.id=v;
    c.appendChild(tr);
    var td=document.createElement('td');
    tr.appendChild(td);
    td.innerHTML=t;
    }
    </script>
    </head>
    <body>
    <select id="mySelect">
    <option value="1">Rails</option>
    <option value="2">Ruby</option>
    <option value="3">NET</option>
    <option value="4">ROR</option>
    <option value="5">JRuby</option>
    <option value="6">...</option>
    </select>
    <table>
    <tbody id="myTable"></tbody>
    </table>
    </body>
    </html>