jquery - テーブル内の要素を検索し、結果に基づいて他の要素を変更する

Question

私は同様の質問で他の例を採用しようとしています。

ここに私のHTMLテーブルは、それがレンダリングされています後に次のようになります。

<table class="table table-striped" id="status"> 
    <thead> 
    <tr> 
      <th>Name</th> 
      <th>REP</th> 
      <th>Package</th> 
      <th> CV</th> 
      <th>Latest CV</th> 
      <th>Custom </th> 
      <th>Status</th>  
    </tr> 
    </thead> 
    <tbody>  
    <tr> 
     <td>asfasdf</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td class="package">tmm</td> 
     <td>tmm-4.2.7-r1</td> 
     <td>4.2.7-r1</td> 
     <td>&nbsp;</td> 
     <td class="status_button"><button type="button" class="btn btn-success"></button></td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td class="package">a-cis</td> 
     <td>a-cis-0.1.0-r0</td> 
     <td>0.1.0-r0</td> 
     <td>&nbsp;</td> 
     <td class="status_button"><button type="button" class="btn btn-danger"></button></td> 
    </tr>  
    </tbody> 
    </table> 

私が必要なもの：テーブルがレンダリングされた

した後、私は危険を持っているすべての行を見つけたいですボタン（ "btn-danger"）をクリックし、 "Package"セル/ td内のテキストの色を赤に変更します。

122 <script> 
123 $(document).ready(function() { 
124   $('.status_button').each(function(i, n) { 
125     console.log($(n.innerHTML)); 
126     //somehow id the sibling <td> that has class 
127     //package and change the font color 
128     //to red 
129   }); 
130 }); 
131 
132 </script> 

にconsole.logは、オブジェクトや表示にプロパティと一致...しかし、私の「IF」文は失敗します。類似した質問をもとに

はここStackOverflowの上で、ここで私がこれまで持っているものです。 console.logの内容をコピーしてここに貼り付けようとしましたが、まだ成功していません。私はボタンクラスの値をテストして、パッケージのフィールドのテキストの色を変更する方法について

任意のヒントは

おかげでいただければ幸いです。

EDIT 1

だから私は、BTN-危険クラスを探すために各機能を変更...とそれはそれはより多くの結果をフィルタリングするために、より良い動作しているようです。 しかし、私はまだ赤でテキストを表示するためにクラス "パッケージ"で兄弟のtdを変更するのに助けが必要だと思います。

122 <script> 
123 $(document).ready(function() { 
124   $('.btn-danger').each(function(i, n) { 
125     console.log($(n.innerHTML)); 
126     if ($(n.innerHTML) == "button.btn.btn-danger") { 
127       alert('red!!'); 
128     }; 
129   }); 
130 }); 
131 
132 </script> 

Answer 1

あなたが探しているのボタンを持つクラスstatus_buttonですべてのセルをフィルタリングする:hasセレクタを使用することができます。

クラスパッケージでセルの色を変更するには、siblingsを使用できます。

スニペットは：

$(function() { 
 
    $('.status_button:has("button.btn.btn-danger")').each(function(index, element) { 
 
    $(element).siblings('.package').css('color', 'red'); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<table class="table table-striped" id="status"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>REP</th> 
 
     <th>Package</th> 
 
     <th> CV</th> 
 
     <th>Latest CV</th> 
 
     <th>Custom</th> 
 
     <th>Status</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>asfasdf</td> 
 
    </tr> 
 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td class="package">tmm</td> 
 
     <td>tmm-4.2.7-r1</td> 
 
     <td>4.2.7-r1</td> 
 
     <td>&nbsp;</td> 
 
     <td class="status_button"> 
 
      <button type="button" class="btn btn-success"></button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td class="package">a-cis</td> 
 
     <td>a-cis-0.1.0-r0</td> 
 
     <td>0.1.0-r0</td> 
 
     <td>&nbsp;</td> 
 
     <td class="status_button"> 
 
      <button type="button" class="btn btn-danger"></button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

jQueryを使用する場合は、代わりに.btn-dangerの検索を使用します。それはより簡単で、あなたが望むものを正確に行います。

$(document).ready(function() { 
 
    $('.btn-danger').each(function(i, n) { 
 
    var thisRow = n.closest('tr'); 
 
    $(thisRow).css("color", "red"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped" id="status"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>REP</th> 
 
     <th>Package</th> 
 
     <th> CV</th> 
 
     <th>Latest CV</th> 
 
     <th>Custom </th> 
 
     <th>Status</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>asfasdf</td> 
 
    </tr> 
 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td class="package">tmm</td> 
 
     <td>tmm-4.2.7-r1</td> 
 
     <td>4.2.7-r1</td> 
 
     <td>&nbsp;</td> 
 
     <td class="status_button"> 
 
     <button type="button" class="btn btn-success"></button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>&nbsp;</td> 
 
     <td>&nbsp;</td> 
 
     <td class="package">a-cis</td> 
 
     <td>a-cis-0.1.0-r0</td> 
 
     <td>0.1.0-r0</td> 
 
     <td>&nbsp;</td> 
 
     <td class="status_button"> 
 
     <button type="button" class="btn btn-danger"></button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>