Allí

Entonces, básicamente, soy nuevo en programación, y estoy trabajando en algo en lo que tienes una tabla en html, y estoy usando jquery para verificar si un determinado campo tiene un número, si es así, esa fila está resaltada. Ahora tengo un código que funciona, pero el problema es que quiero que resalte el fondo en rojo y cambie el color del texto a blanco, que también funciona, pero la tabla que tengo tiene hipervínculos, que permanecen azules a pesar de mi código, para que cualquiera pueda mejorar ¿mi código?

Quiero que todo el texto se ponga blanco, incluidos los enlaces con "href"

$(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');

    } 
	});
});
<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
Cyb3rHac3r 13 ene. 2017 a las 07:44

3 respuestas

La mejor respuesta

Encuentra la etiqueta a en el código y coloréala usando 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>
0
Mukesh Ram 13 ene. 2017 a las 04:48

Usa este tipo de javascript en tu código cámbialo

$(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
    });
});

Prueba esta demo http://jsfiddle.net/eY8uH/767/

0
Ankit 13 ene. 2017 a las 04:52

Actualmente, su estilo de adición a la etiqueta tr solamente, pero también necesitará agregar un estilo de color a la etiqueta de anclaje o de lo contrario la hoja de estilo de agente de usuario sobrescribirá el estilo.

$(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>
0
Nadir Laskar 13 ene. 2017 a las 05:11