使用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> 

我得到的someInput框的值改變，我設法慢慢修改表中的值，但我還沒有想出如何只寫一次1行，具體取決於select標籤設置的值。當選擇foo時，我希望在表格中有blarg，當選中bar時，我會在表格中顯示blah。

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