1

Javascript は、これらの動的に生成された静的テーブルの行に表示される各数値をインクリメントします。

jQuery は、クリックされたときに各行を忠実に非表示にしますが、もちろん、数値は変わりません。訪問者が不要な行を削除したら、jQuery を使用して行の番号を付け直すにはどうすればよいですか? ユーザーに「再番号付け」をクリックして、残りの行の番号を正しく付け直してもらいたい。私が持っているものはうまくいきませんでした:-)

助けていただければ幸いです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script language="javascript" type="text/javascript">
 var keepTrack = 1;      
 </script>
 <table>
 <tr><td colspan="2" id="renumber">renumber</td></tr>

 <tr id="sWH1">
 <td>
 <script>
 document.write(keepTrack);keepTrack++;
 </script></td>
 <td>someWordsHere</td></tr>

<script>
$(document).ready(function() { 
$("#sWH1").click(function() {
$("#sWH1").hide(100);}); 
 });</script>


 <tr id="sWH2">
 <td>
 <script>
 document.write(keepTrack);keepTrack++;
 </script></td>
 <td>someWordsHere</td></tr>

 <script>
 $(document).ready(function() { 
 $("#sWH2").click(function() {
 $("#sWH2").hide(100);}); 
  });</script>


 <tr id="sWH3">
 <td>
 <script>
 document.write(keepTrack);keepTrack++;
 </script></td>
 <td>someWordsHere</td></tr>

 <script>
 $(document).ready(function() { 
 $("#sWH3").click(function() {
 $("#sWH3").hide(100);}); 
  });</script>

 </table>

 <script language="JavaScript" type="text/JavaScript">
 $(document).ready(function() {
 $("#renumber").click(function() {
 'magically renumber the remaining table rows'
 });
  });
 </script>
4

2 に答える 2

3

率直な答え

行の番号を付け直すにはeach()、一連の要素 (この場合は行) を反復処理し、i列挙子パラメーターを提供するメソッドを使用できます。

一般的な例:

$(some-tr-selector).each(function(i) {
    $(this).children(some-td-selector).text(i+1);
});

これを行うには、より優れたセレクターを定義する必要があります。現在のコードの問題は、セレクターが具体的すぎることです。これにより、行ごとにクリック ハンドラーを作成する代わりに、一般的なイベント ハンドラーを作成できなくなります。

コードを改善する方法

関連する番号付き行のクラスを設定することを検討してください。これにより、すべての行に対して単一のクリック ハンドラーを作成し、番号を付け直すときに関連する行をより簡単に選択できるようになります。

例えば：

HTML

<table>
    <tr><td colspan="2" id="renumber">renumber</td></tr>
    <tr class="numbered_row">
        <td class="row_number"></td>
        <td>someWordsHere</td>
    </tr>
    <tr class="numbered_row">
        <td class="row_number"></td>
        <td>someWordsHere</td>
    </tr>
    <tr class="numbered_row">
        <td class="row_number"></td>
        <td>someWordsHere</td>
    </tr>
    ...
</table>

Javascript

$(document).ready(function() {
     // Number all rows onload
    $('table tr.numbered_row').each(function(i) {
        $(this).children('.row_number').text(i+1);
    });

     // Row click handler
    $('table tr.numbered_row').on('click', function() {
        $(this).hide(100);
    });

     // Renumber click handler
    $('#renumber').on('click', function() {
        $('table tr.numbered_row:visible').each(function(i) { // Iterate over all _visible_ rows
            $(this).children('.row_number').text(i+1);
        });
    });
});

2 つのクラスnumbered_rowを追加row_numberすることで、1 つのコード ブロックですべてを効率的に行うことができることに注意してください。

さらに一般的なアプローチ

each()必要に応じて、およびメソッドを連鎖させ、行が非表示になるたびon()に 内で再番号付けを処理することにより、これをさらに一般的かつ効率的にすることができます。on()

例えば：

$(document).ready(function() {
     // Number all rows onload
    $('table tr.numbered_row').each(function(i) {
        $(this).children('.row_number').text(i+1);
     // Row click handler
    }).on('click', function() {
         // Hide current row
        $(this).hide(100);
         // Renumber visible rows
        $('table tr.numbered_row:visible').each(function(i) { // Iterate over all _visible_ rows
            $(this).children('.row_number').text(i+1);
        });
    });
});
于 2013-02-16T20:25:24.517 に答える
2

別の解決策は次のとおりです。

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

これはいくつかの変更を加えたコードです。テーブルには id=myTable があり、「残りのテーブル行を魔法のように再番号付けする」は次のように置き換えられました

$('#myTable tr[id]:visible').each(function(i){
   $(this).find('td:first').text(i+1);
})
于 2013-02-16T23:07:01.010 に答える