jQueryを使用してテーブル列のすべてのセルで関数を実行

Question

私は$tableとして以下で定義されているテーブル要素を持っています。私は、特定の表見出しで定義されている特定の列であるすべてのセルに対して関数を実行しようとしています - qc_statusTh。私はそのテーブルの見出し（qc_statusColumnIndex）のインデックスを見つけ、その列の次の表のセルを取得することができました - qc_statusCell。

ただし、テーブルセルをループして、その列の各テーブルセルに対して関数を実行することはできません。ここで

は、私がこれまで持っているJavaScriptコードです：

$(document).ready(function() { 
    var $table = $("table.tables.list"); 

    if ($table.length > 0) { 
    var qc_statusTh = $("th.headersub:contains('qc_status')"); 
    var qc_statusColumnIndex = $(qc_statusTh).index(); 
    var qc_statusCell = $($table).find("td").eq(qc_statusColumnIndex); 

    // this does not work. this only replaces the first cell 
    // in the row after qc_statusTh with "TESTING" 

    $(qc_statusCell).each(function() { 
     $(this).replaceWith("TESTING"); 
    }); 

    } 

}); 

にはどうすればqc_statusColumnIndexに等しいインデックスを持つテーブル内の各セルをループにこのコードを編集することができますか？

Answer 1

考えてみると、実際にはセルではなくテーブルの行に対して（eachを使用して）反復処理したいと考えています。これを行うと、各行から番目のtd要素を取得し、変換を適用できます。

$(document).ready(function() { 
 
    var $table = $("table.tables.list"); 
 

 
    if ($table.length > 0) { 
 
    var qc_statusTh = $("th.headersub:contains('qc_status')"); 
 
    var qc_statusColumnIndex = $(qc_statusTh).index(); 
 
    
 
    var qc_rows = $($table).find('tr'); 
 

 
    $(qc_rows).each(function() { 
 
     $(this).find('td').eq(qc_statusColumnIndex).replaceWith("TESTING"); 
 
    }); 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table class="tables list"> 
 
    <thead> 
 
    <th class="headersub">qc_example</th> 
 
    <th class="headersub">qc_status</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Ok</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Ok</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Error</td> 
 
    </tr> 
 
    </tbody> 
 
</table>