选择下拉框的值 显示在同一页面的表格中 怎么实现？

一排下拉框   选择之后  点击添加 所选择的值被添加到页面中的表格。js怎么实现？

解决方案 »

  1.   

    <!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=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <select id="sel">
         <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <table id="tab">
         <tr>
             <td>1</td>
            </tr>
        </table>
        <input type="button" value="添加" id="btn" />
        <script>
         document.getElementById('btn').onclick = function(){
    var value = document.getElementById('sel')[document.getElementById('sel').selectedIndex].value;
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    td.innerHTML = value;
    tr.appendChild(td);
    document.getElementById('tab').appendChild(tr);
    };
        </script>
    </body>
    </html>
      

  2.   

    <!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=utf-8" />
    <title>无标题文档</title>
    </head><body>
        <select id="sel">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <table id="tab">
            <tr>
                <td>1</td>
            </tr>
        </table>
        <input type="button" value="添加" id="btn" />
        <input type="button" value="删除" id="del" />
        <script>
            document.getElementById('btn').onclick = function(){
                var value = document.getElementById('sel')[document.getElementById('sel').selectedIndex].value;
                var tr = document.createElement('tr');
                var td = document.createElement('td');
                td.innerHTML = value;
                tr.appendChild(td);
                document.getElementById('tab').appendChild(tr);
            };

    document.getElementById('del').onclick = function(){
    if(document.getElementById('tab').getElementsByTagName('tr').length - 1 > 0){
    document.getElementById('tab').removeChild(document.getElementById('tab').getElementsByTagName('tr')[document.getElementById('tab').getElementsByTagName('tr').length - 1]);
    }else{
    }
    };
        </script>
    </body>
    </html>
      

  3.   

    <!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=utf-8" />
    <title>无标题文档</title>
    </head><body>
        <select id="sel">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <table id="tab">
            <tr>
                <td>1</td>
            </tr>
        </table>
        <input type="button" value="添加" id="btn" />
        <script>
            document.getElementById('btn').onclick = function(){
                var value = document.getElementById('sel')[document.getElementById('sel').selectedIndex].value;
                var tr = document.createElement('tr');
                var td = document.createElement('td');
                td.innerHTML = value;
                tr.appendChild(td);
                document.getElementById('tab').appendChild(tr);
                var input = document.createElement("input");
                input.type ='button';
                input.value = '删除';
                td.appendChild(input);
                input.onclick = function(){
                   document.getElementById('tab').removeChild(input.parentNode.parentNode);
                }
            };
        </script>
    </body>
    </html>借用1楼。
      

  4.   


    <!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=utf-8" />
    <title>无标题文档</title>
    </head><body>
        <select id="sel">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <select id="sel2">
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <table id="tab">
            <tr>
                <td>1</td>
            </tr>
        </table>
        <input type="button" value="添加" id="btn" />
        <input type="button" value="删除" id="del" />
        <script>
            document.getElementById('btn').onclick = function(){
                var value = document.getElementById('sel')[document.getElementById('sel').selectedIndex].value;
    var value2 = document.getElementById('sel2')[document.getElementById('sel2').selectedIndex].value;
                var tr = document.createElement('tr');
                var td1 = document.createElement('td');
    var td2 = document.createElement('td');
                td1.innerHTML = value;
    td2.innerHTML = value2;
                tr.appendChild(td1);
    tr.appendChild(td2);
                document.getElementById('tab').appendChild(tr);
            };

    document.getElementById('del').onclick = function(){
    if(document.getElementById('tab').getElementsByTagName('tr').length - 1 > 0){
    document.getElementById('tab').removeChild(document.getElementById('tab').getElementsByTagName('tr')[document.getElementById('tab').getElementsByTagName('tr').length - 1]);
    }else{
    }
    };
        </script>
    </body>
    </html>