2017-01-13 15 views
0

ありHightlightテキストや変更色

だから、基本的に私はプログラミングに新しいです、と私はあなたがHTMLでテーブルを持っている何かに取り組んでいます、と私は、特定のフィールドには番号を持っているかどうかを確認するためにjqueryのを使用していますそうであれば、その行がハイライト表示されます。今私はコードが動作しますが、問題は赤で背景をハイライトし、テキストの色を白に変更したいだけですが、テーブルにはハイパーリンクがあり、コードにもかかわらず青色になります。私のコード?

私はすべてのテキストが "HREF" とのリンクを含め、白くしたい

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

 
    } 
 
\t }); 
 
});
<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>

答えて

0

コードでaタグを検索し、CSS

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

 
    } 
 
\t }); 
 
});
<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>
を使用して色

0

あなたのコードの変更で使用する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 
    }); 
}); 

あなただけtrタグにスタイルを追加することができますが、また、アンカーにカラースタイルを追加する必要があります、現在 http://jsfiddle.net/eY8uH/767/

0

このデモを試しますまた、ユーザエージェントスタイルシートがスタイルを上書きします。

$(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){ 
 
    \t $(this).parent().css('background-color','red'); 
 
      $(this).parent().css('color','white') 
 
          .find('a').css('color','white'); 
 

 
    } 
 
\t }); 
 
});
<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>

関連する問題