jquery - 在表格中查找元素并根据调查结果更改其他元素

Question

我试图在stackoverflow上调整其他类似问题的示例...但是我现在很难过。

这是我的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>

我需要什么：

表格渲染后，我想找到所有带有危险按钮的行（＆＃34; btn-danger＆＃34;）并更改＆＃34;包＆＃34;中文本的颜色。 cell / td为红色。

基于stackoverflow上的类似问题，这是我到目前为止所做的：

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匹配对象中的属性并显示...但是我的＆＃34; if＆＃34;声明失败。 我试图将我的console.log的内容复制到这里粘贴，但还没有成功。

有关如何测试按钮类的值然后更改“包”字段中的文本颜色的任何提示将不胜感激

感谢。

编辑1

所以我改变了每个函数来寻找btn-danger类......这看起来效果更好，因为它可以过滤更多的结果。 但我想我仍然需要帮助改变兄弟td与班级＆＃34;包＆＃34;以红色显示文字。

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

您可以使用:has选择器过滤具有您正在寻找的按钮的类status_button的所有单元格。

为了使用类包更改单元格的颜色，您可以使用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>