0

1 を選択するとテーブルに tr 1 のみが表示され、2 を選択すると tr 2 などが表示される場合、jquery を実装するにはどうすればよいですか?

<select name="select_main_table">
<option value="1" selected="selected">Show line 1</option>
<option value="2" >Show line 2</option>
<option value="3" >Show line 3</option>
</select>

<table id="main_table">
 <tr id="show1"><td>line 1</td><td<line 1/td></tr>
 <tr id="show2"><td>line 2</td><td<line 2/td></tr>
 <tr id="show3"><td>line 2</td><td<line 2/td></tr> 
</table>

前もって感謝します？

4

1 に答える 1

1

おそらく、次のようなものです。

$(document).ready(function() {
   $('select[name="select_main_table"]').change(function() {
      $("#main_table tr").show().slice(this.value).hide();
   }).change();
});

デモ: http://jsfiddle.net/kms8k/

編集:私の最初の答えは、要件の誤解に基づいていたと思います-「2」を選択すると「最初の2行を表示する」ことを意味すると思いました。指定した行のみを表示するには、次のようにします。

$(document).ready(function() {
   $('select[name="select_main_table"]').change(function() {
      $("#main_table tr").hide().eq(this.value-1).show();
      // OR
      $("#show" + this.value).show().siblings().hide();
   }).change();
});

デモ: http://jsfiddle.net/kms8k/1/

tr 要素の属性を使用せずに機能させることができることに注意してくださいid。その属性をまったく含めないで html を単純化したい場合は...

私が使用したすべての jQuery メソッドは十分に文書化されています。

于 2012-12-17T02:32:38.110 に答える