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>

我得到someInput框值要更改，我设法慢慢修改表值，但我还没想出如何一次只写1行，具体取决于select标签设置的值。我想在选择foo时在表格中加入blarg，并在选择条形图时在表格中显示。

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

演示：Fiddle

更清洁的解决方案可以是this

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

1 个答案: