0

次のコードが機能しています (リンクをクリックすると、次の非表示のテーブル行が表示されます)。

HTML:

<table>

<a href="#" class="showrows">Add row</a>

<tr class="cache">
<td><input type="text"  size="15"></td>
<td><input type="text"  size="15"></td>
</tr>

<tr class="cache">
<td><input type="text"  size="15"></td>
<td><input type="text"  size="15"></td>
</tr>


</table>

そして私のJS：

$(document).ready(function() {

$('tr.cache').css("display","none");

$('.showrows').live('click',function(e){
   e.preventDefault();
   $('tr:hidden:first').show("fast");   
});

});

しかし今、同じページに現在のもの (上記参照) のようないくつかのテーブルが必要で、それぞれに独自の「showrows」機能があります。実際には、リンクが属するテーブルを見つけてから、このテーブルの最初の非表示の行を見つけて表示するには、JQuery コードが必要です...

次のすべての解決策を1つずつ試しました。

$(this).closest('tr.cache').show("fast");
$(this).closest('tr:hidden:first').show("fast");
$(this).closest('table').find('tr:hidden:first').show("fast");
$(this).closest('tr').show("fast");
$(this).parents('table').next('tr:hidden:first').show("fast");

どれも機能していません！あなたによると、どのような問題がありますか? ご協力いただきありがとうございます！

4

4 に答える 4

1

リンクの周りに表の行と表のセルを追加すると、HTML マークアップが無効になります

ブラウザー (ほとんどの) ブラウザーが行うことは、次のマークアップを提供します。

<a class="showrows" href="#">Add row</a>
<table>
    <tbody>
        <tr class="cache">
            <td><input type="text" size="15"></td>
            <td><input type="text" size="15"></td>
        </tr>
        <tr class="cache">
            <td><input type="text" size="15"></td>
            <td><input type="text" size="15"></td>
        </tr>
    </tbody>
</table>

そのため、マークアップを少し変更する必要があります。

<table>
  <tr>
    <td colspan="2">
      <a href="#" class="showrows">Add row</a>
    </td>
  </tr>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>

  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>

</table>

jQuery コードを使用します: $(document).ready(function() {

  $('tr.cache').css("display","none");

  $('.showrows').live('click',function(e){
    e.preventDefault();
    var table = $(this).closest("table");
    $('tr:hidden:first', table).show("fast");   
  });

});

デモ：

http://jsbin.com/owefew/1/edit

于 2012-08-07T18:32:05.003 に答える
0

識別子付き（HTML構造は変更可能）

リンクをテーブルに「添付」する必要があります。たとえば、data -...属性を使用できますが、IDも問題ありません。注意：アンカーをに直接配置することはできないため、tableVadymPetrychenkoのソリューションは依然として無効なHTMLです。

<a href="#" class="showrows" data-table="table1">Add row to table 1</a>
<table id="table1">
    <tr class="cache">
        <td><input type="text"  size="15">Table 1 cell 1</td>
        <td><input type="text"  size="15">Table 1 cell 2</td>
    </tr>
    <tr class="cache">
        <td><input type="text"  size="15">Table 1 cell 3</td>
        <td><input type="text"  size="15">Table 1 cell 4</td>
    </tr>
</table>

<a href="#" class="showrows" data-table="table2">Add row to table 2</a>
<table id="table2">
    <tr class="cache">
        <td><input type="text"  size="15">Table 2 cell 1</td>
        <td><input type="text"  size="15">Table 2 cell 2</td>
    </tr>
    <tr class="cache">
        <td><input type="text"  size="15">Table 2cell 3</td>
        <td><input type="text"  size="15">Table 2 cell 4</td>
    </tr>
</table>

JQueryコード：

$(document).ready(function() {
    $('tr.cache').css("display","none");
    $('.showrows').live('click',function(e) {
        e.preventDefault();
        $('table#' + $(this).attr('data-table') + ' tr:hidden:first').show("fast");   
    });
});

http://jsfiddle.net/Mikey/KnRFf/を参照してください

識別子なし

私はあなたが本当にこのHTML構造を使用しています、アンカーの後にテーブルにリンクすることも可能です$(this).next('table').find('tr:hidden:first').show("fast");

于 2012-08-07T18:35:15.960 に答える
0

HTMLを少し変更します。

有効なマークアップのために、アンカータグをテーブルの外に配置します。

HTML

<!-- First table -->

<a href="#" class="showrows">Add row</a>
<table>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>
</table>

<!-- Second table -->

<a href="#" class="showrows">Add row</a>
<table>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>
</table>

<!-- More tables -->

jQuery

$('tr.cache').css("display", "none");

$('.showrows').live('click', function(e) {
    e.preventDefault();
    var table = $(this).next('table');
    table.find('tbody tr:hidden:first').show("fast");
});

デモ

ひとこと

可能であれば、廃止されたため、の代わりに、を使用.on()したデリゲートイベント（別名ライブイベント）の処理に使用します。jQuery 1.7+.live()

于 2012-08-07T18:37:04.787 に答える
0 
$('.showrows').live('click', function(e) {
    e.preventDefault();

    var table = $(this).parent();
    $('tr:hidden:first', table).show("fast");   
});

これを試して。

于 2012-08-07T18:32:15.367 に答える