高亮文字和更改颜色

Question

有

所以基本上我是编程的新手，我正在研究你在html中有一个表的东西，我正在使用jquery来检查某个字段是否有一个数字，如果确实那么该行是高亮显示。现在我有代码可以工作，但问题是我希望它以红色突出显示背景并将文本颜色更改为白色，这也有效但我的表有超链接，尽管我的代码保持蓝色，所以任何人都可以改进我的代码？

我希望所有文字都变成白色，包括与＆＃34; href＆＃34;

的链接

＆＃13;

＆＃13;

$(document).ready(function() {
  
  var levelColumnIndex = 5;
  $('tr td:nth-child('+levelColumnIndex+')').each(function() {
    var cellText = $(this).html(); 
    if(cellText == 3){
    		  $(this).parent().css('background-color','red');
          $(this).parent().css('color','white');

    } 
	});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
  <thead>
    <tr class="sr-header"> 
      <th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
      <th class="tiny" valign="top" width="5%" align="left"><nobr><a href="" class="tiny-white">Case ID</a> </nobr> </th>
      <th class="tiny" valign="top" width="30%" align="left"><nobr><a href="" class="tiny-white">Subject</a> </nobr> </th>
      <th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="2%" align="left"><nobr><a href="" class="tiny-white">Level</a> </nobr> </th>
      <th class="tiny" valign="top" width="15%" align="left"><nobr><a href="" class="tiny-white">Status</a> </nobr> </th>
      <th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
      <th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>
    </tr>
  </thead>
  <tbody>
    <tr class="sr-light-band">
      <td  class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input  name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">
      </td>

      <td class="small" <nobr="" valign="top" align="left"><a><a href="http://google.com">1696368392</a></a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div  title="Case1" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a title="Case1">Case1</a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Jussi" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">3</td>
      <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
    </tr>
    <tr class="sr-dark-band">
      <td class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">
      </td>
      <td class="small" <nobr="" valign="top" align="left"><a><a href="http://google.com">1694436342</a></a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Case2" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a title="Case2">Case2</a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a href="" title=""></a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">4</td>
      <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
    </tr>
    <tr class="sr-light-band">
      <td class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">
      </td>
      <td class="small" <nobr="" valign="top" align="left"><a><a href="http://google.com">1681523912</a></a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Case3"position:absolute; white-space:nowrap">
          <a title="Case3">Case3</a>
        </div>
        &nbsp;
      </div>
    </td>
    <td class="small" <nobr="" valign="top" align="left">
      <div title="Jussi" style="position:relative; overflow:hidden; height:100%">
        <div style="position:absolute; white-space:nowrap">
        </div>
        &nbsp;
      </div>
    </td>
    <td class="small" <nobr="" valign="top" align="left">3</td>
    <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="right"></td>
    <td class="small" <nobr="" valign="top" align="right"></td>
  </tr>
</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在代码中查找a代码并使用css

为其着色

$(document).ready(function() {
  
  var levelColumnIndex = 5;
  $('tr td:nth-child('+levelColumnIndex+')').each(function() {
    var cellText = $(this).html(); 
    if(cellText == 3){
    		  $(this).parent().css('background-color','red');
              $(this).parent().css('color','white');
              $(this).parent().find('a').css('color','white');

    } 
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
  <thead>
    <tr class="sr-header"> 
      <th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
      <th class="tiny" valign="top" width="5%" align="left"><nobr><a href="" class="tiny-white">Case ID</a> </nobr> </th>
      <th class="tiny" valign="top" width="30%" align="left"><nobr><a href="" class="tiny-white">Subject</a> </nobr> </th>
      <th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="2%" align="left"><nobr><a href="" class="tiny-white">Level</a> </nobr> </th>
      <th class="tiny" valign="top" width="15%" align="left"><nobr><a href="" class="tiny-white">Status</a> </nobr> </th>
      <th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
      <th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>
    </tr>
  </thead>
  <tbody>
    <tr class="sr-light-band">
      <td  class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input  name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">
      </td>

      <td class="small" <nobr="" valign="top" align="left"><a><a href="http://google.com">1696368392</a></a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div  title="Case1" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a title="Case1">Case1</a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Jussi" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">3</td>
      <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
    </tr>
    <tr class="sr-dark-band">
      <td class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">
      </td>
      <td class="small" <nobr="" valign="top" align="left"><a><a href="http://google.com">1694436342</a></a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Case2" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a title="Case2">Case2</a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a href="" title=""></a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">4</td>
      <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
    </tr>
    <tr class="sr-light-band">
      <td class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">
      </td>
      <td class="small" <nobr="" valign="top" align="left"><a><a href="http://google.com">1681523912</a></a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Case3"position:absolute; white-space:nowrap">
          <a title="Case3">Case3</a>
        </div>
        &nbsp;
      </div>
    </td>
    <td class="small" <nobr="" valign="top" align="left">
      <div title="Jussi" style="position:relative; overflow:hidden; height:100%">
        <div style="position:absolute; white-space:nowrap">
        </div>
        &nbsp;
      </div>
    </td>
    <td class="small" <nobr="" valign="top" align="left">3</td>
    <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="right"></td>
    <td class="small" <nobr="" valign="top" align="right"></td>
  </tr>
</tbody>
</table>

Answer 2

在你的代码中使用这种类型的javascript来改变它

$(function () {
    var $table = $('table'),
        checkboxColumn = 0;

    // checkboxes updates
    $table.find('tbody').on('change', 'input', function () {
        var $cell = $(this).closest('td');
        // only accept checkboxes in the first column
        if ($cell[0].cellIndex === checkboxColumn) {
            $cell.closest('tr').toggleClass('checked', this.checked);
            // update cache with checkbox state
            $table.trigger('updateCell', [ $cell[0] ]);
        }
    });

    $table.find('thead input').on('change', function(){
        var chk = this.checked;
        $table.find('tbody tr').each(function(){
            $(this).find('td:eq(' + checkboxColumn + ') input')
                .prop('checked', chk)
                .trigger('change');
        });
    });

    var headers = {};
    headers[checkboxColumn] = { sorter: false };

    $table.tablesorter({
        widgets: ['zebra'],
        headers: headers
    });
});

试试这个演示 http://jsfiddle.net/eY8uH/767/

Answer 3

目前，您只向tr标记添加样式，但您还需要为锚标记添加颜色样式，否则用户代理样式表将覆盖该样式。

$(this).parent().css('color','white')
                              .find('a').css('color','white');

$(document).ready(function() {
  
  var levelColumnIndex = 5;
  $('tr td:nth-child('+levelColumnIndex+')').each(function() {
    var cellText = $(this).html(); 
    if(cellText == 3){
    	  $(this).parent().css('background-color','red');
          $(this).parent().css('color','white')
                          .find('a').css('color','white');

    } 
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="SearchResultsTable" cellpadding="2" cellspacing="1" width="100%">
  <thead>
    <tr class="sr-header"> 
      <th class="tiny bulk-hidden" valign="top" width="3%" align="left"><input id="selectAll" class="bulk-checkbox-header bulk-hidden" onclick="selectAllCases(this.checked);" type="checkbox"> </th>
      <th class="tiny" valign="top" width="5%" align="left"><nobr><a href="" class="tiny-white">Case ID</a> </nobr> </th>
      <th class="tiny" valign="top" width="30%" align="left"><nobr><a href="" class="tiny-white">Subject</a> </nobr> </th>
      <th class="tiny" valign="top" width="20%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="2%" align="left"><nobr><a href="" class="tiny-white">Level</a> </nobr> </th>
      <th class="tiny" valign="top" width="15%" align="left"><nobr><a href="" class="tiny-white">Status</a> </nobr> </th>
      <th class="tiny" valign="top" width="10%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="5%" align="left"><nobr> </nobr> </th>
      <th class="tiny" valign="top" width="5%" align="right"><nobr><strong></strong> <img src="" border="0"></nobr> </th>
      <th class="tiny" valign="top" width="5%" align="right"><nobr> </nobr> </th>
    </tr>
  </thead>
  <tbody>
    <tr class="sr-light-band">
      <td  class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input  name="selectCase" id="1696368392-checkbox" class="bulk-checkbox bulk-hidden" value="1696368392" type="checkbox">
      </td>

      <td class="small" <nobr="" valign="top" align="left"><a><a href="http://google.com">1696368392</a></a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div  title="Case1" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a title="Case1">Case1</a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Jussi" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">3</td>
      <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
    </tr>
    <tr class="sr-dark-band">
      <td class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input name="selectCase" id="1694436342-checkbox" class="bulk-checkbox bulk-hidden" value="1694436342" type="checkbox">
      </td>
      <td class="small" <nobr="" valign="top" align="left"><a><a href="http://google.com">1694436342</a></a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Case2" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a title="Case2">Case2</a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="" style="position:relative; overflow:hidden; height:100%">
          <div style="position:absolute; white-space:nowrap">
            <a href="" title=""></a>
          </div>
          &nbsp;
        </div>
      </td>
      <td class="small" <nobr="" valign="top" align="left">4</td>
      <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="left"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
      <td class="small" <nobr="" valign="top" align="right"></td>
    </tr>
    <tr class="sr-light-band">
      <td class="small bulk-hidden" <nobr="" valign="top" align="left">
        <input name="selectCase" id="1681523912-checkbox" class="bulk-checkbox bulk-hidden" value="1681523912" type="checkbox">
      </td>
      <td class="small" <nobr="" valign="top" align="left"><a><a href="http://google.com">1681523912</a></a></td>
      <td class="small" <nobr="" valign="top" align="left">
        <div title="Case3"position:absolute; white-space:nowrap">
          <a title="Case3">Case3</a>
        </div>
        &nbsp;
      </div>
    </td>
    <td class="small" <nobr="" valign="top" align="left">
      <div title="Jussi" style="position:relative; overflow:hidden; height:100%">
        <div style="position:absolute; white-space:nowrap">
        </div>
        &nbsp;
      </div>
    </td>
    <td class="small" <nobr="" valign="top" align="left">3</td>
    <td class="small" <nobr="" valign="top" align="left">Unassigned</td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="left"></td>
    <td class="small" <nobr="" valign="top" align="right"></td>
    <td class="small" <nobr="" valign="top" align="right"></td>
  </tr>
</tbody>
</table>