0

初めて 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>

someInput ボックスの値を変更して、テーブルの値をゆっくりと変更することができましたが、select タグで設定された値に応じて、一度に 1 行だけを書き込む方法がまだわかりません。foo が選択されている場合はテーブルに blarg があり、bar が選択されている場合はテーブルに blah が必要です。

4

1 に答える 1

2

試す

<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();

デモ:フィドル

よりクリーンなソリューションはこれです

于 2013-10-17T03:07:08.297 に答える