使用jquery根据表中的某种颜色查找文本

Question

＆＃13;

＆＃13;

$('tr:not(:first) td:first-child').filter(function() {
   return $(this).css('color') == 'rgb(0, 0, 0)';
 }).each(function() {
   $(this).css('background-color', 'yellow');
 })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table id="myTable" class="order-list">
    <thead>
        <tr>
            <td>Project</td>
            <td>Type</td>
            <td>Name</td>
            <td>Date</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                1718
            </td>
            <td>
                bid
            </td>
            <td>
               user1
            </td>
            <td>
                date
            </td>
        </tr>
        <tr>
            <td>
                1718
            </td>
            <td>
                design
            </td>
            <td>
               user2
            </td>
            <td>
                date
            </td>
        </tr>
        <tr>
            <td>
                1720
            </td>
            <td>
                design
            </td>
            <td>
               user3
            </td>
            <td>
                1722
            </td>
        </tr>
         <tr>
            <td>
                1720
            </td>
            <td>
                construction
            </td>
            <td>
               user4
            </td>
            <td>
                1722
            </td>
        </tr>
         <tr>
            <td>
                <p style="color:red">17290</p>
            </td>
            <td>
                construction
            </td>
            <td>
               user5
            </td>
            <td>
                1722
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

所以基本上我有一个表，我想在第一列中找到具有特定文本颜色（黑色）的单元格。但是，我的代码无效。在这个示例表中，它突出显示了所有具有不同颜色的单元格，而不仅仅是黑色....此外，此刻我用黑色突出显示文本，但是可以插入一个新的空白行在它上面而不是??

Answer 1

您必须将td上的文字设置为<p>。

尝试使用此代码可以解决您的问题。

$('tr:not(:first) td:first-child').filter(function() {
   if($(this).css('color') == 'rgb(0, 0, 0)'){
   		$(this).css('background-color', 'yellow');
   }else{
   	$(this).css('background-color', 'none');
   }
 });

#differente{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="order-list">
    <thead>
        <tr>
            <td>Project</td>
            <td>Type</td>
            <td>Name</td>
            <td>Date</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                1718
            </td>
            <td>
                bid
            </td>
            <td>
               user1
            </td>
            <td>
                date
            </td>
        </tr>
        <tr>
            <td>
                1718
            </td>
            <td>
                design
            </td>
            <td>
               user2
            </td>
            <td>
                date
            </td>
        </tr>
        <tr>
            <td>
                1720
            </td>
            <td>
                design
            </td>
            <td>
               user3
            </td>
            <td>
                1722
            </td>
        </tr>
         <tr>
            <td>
                1720
            </td>
            <td>
                construction
            </td>
            <td>
               user4
            </td>
            <td>
                1722
            </td>
        </tr>
         <tr>
            <td id="differente">
                17290
            </td>
            <td>
                construction
            </td>
            <td>
               user5
            </td>
            <td>
                1722
            </td>
        </tr>
    </tbody>
</table>

Answer 2

正如我在评论中写的那样，p标签对目标而言是错误的。

要插入新的空行，您必须找到td元素的父级（tr元素），并在其前面添加一个新的空tr元素，至少有一个td元素。

这可以使用以下jQuery

完成

$(this).parent().before('<tr><td></td></tr>');

实施例

$('tr:not(:first) td:first-child').filter(function() {
   return $(this).css('color') == 'rgb(0, 0, 0)';
 }).each(function() {  
  $(this).parent().before('<tr><td></td></tr>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table id="myTable" class="order-list">
    <thead>
        <tr>
            <td>Project</td>
            <td>Type</td>
            <td>Name</td>
            <td>Date</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                1718
            </td>
            <td>
                bid
            </td>
            <td>
               user1
            </td>
            <td>
                date
            </td>
        </tr>
        <tr>
            <td>
                1718
            </td>
            <td>
                design
            </td>
            <td>
               user2
            </td>
            <td>
                date
            </td>
        </tr>
        <tr>
            <td>
                1720
            </td>
            <td>
                design
            </td>
            <td>
               user3
            </td>
            <td>
                1722
            </td>
        </tr>
         <tr>
            <td>
                1720
            </td>
            <td>
                construction
            </td>
            <td>
               user4
            </td>
            <td>
                1722
            </td>
        </tr>
         <tr>
            <td style="color:red">17290
            </td>
            <td>
                construction
            </td>
            <td>
               user5
            </td>
            <td>
                1722
            </td>
        </tr>
    </tbody>
</table>