jquery - 使用 Select 在 Jquery 中动态创建/删除表行

Question

我是第一次使用 Jquery，我应该使用 Select 标记在表中生成表。由于这对我来说是新的，我已经尝试了语法。到目前为止，我已经想出了以下代码：

<select id="theSelect">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
</select>


<input id="someInput"/>

<table id="mytable" border="1">
    <tr>
       <th>AAAAA</th>
       <th>BBBBB</th>
    </tr>
    <tr>
       <td>CCCCC</td>
       <td>DDDDD</td>
    </tr>
</table>

<script>
    $("#theSelect").change(function() {
        switch($(this).val())
         {
            case "foo":
                $("#someInput").val("hello");
                $("#mytable").append($("#blarg"))
                break;
            case "bar":
                $("#someInput").val("bye");
                //$("#mytable").remove($("#blarg"))
                $("#mytable").append($("#blah"))
                break;
            default:
                $("#someInput").val("really?");

            }

        }).change();
    </script>


    <div id="blarg">
    <tr><td>hello world</td><td></td></tr>
    </div>


    <div id="blah">
    <tr><td>goodbye world</td><td></td></tr>
    </div>

我得到了一些输入框的值来改变，我设法慢慢地修改表值，但我还没有弄清楚如何一次只写 1 行，具体取决于选择标签设置的值。I want to have blarg in the table when foo is selected and blah in the table when bar is selected.

Answer 1

尝试

<table id="blarg" style="display: none">
    <tr>
        <td>hello world</td>
        <td></td>
    </tr>
</table>
<table id="blah" style="display: none">
    <tr>
        <td>goodbye world</td>
        <td></td>
    </tr>
</table>

然后

$("#theSelect").change(function () {
    var tr;

    var $table = $("#mytable")
    $table.find('.select').remove();
    switch ($(this).val()) {
        case "foo":
            $("#someInput").val("hello");
            tr = '#blarg';
            break;
        case "bar":
            $("#someInput").val("bye");
            tr = '#blah';
            break;
        default:
            $("#someInput").val("really?");

    }
    if(tr){
        $(tr).find('tr').clone().addClass('select').appendTo($table);
    }

}).change();

演示：小提琴

一个更清洁的解决方案可以是这个