使用JavaScript或jQuery突出显示文本

时间:2016-12-18 10:13:18

标签: javascript jquery html

所以我对JavaScript很陌生,所以我真的很感激,如果有人可以帮助我, 基本上我正在使用像下面那样的html页面

现在我只对html代码的Level列感兴趣,我希望我的JavaScript或jQuery脚本突出显示红色背景颜色为3级的任何案例,任何示例代码或演示都会非常有用:)

编辑:要清楚我希望脚本检查所有行并检查级别是否为3然后突出显示具有红色背景颜色的特定情况,而不是选中复选框时!,并且我确实可以访问服务器端html文件,这就是我在本地使用javascript来修改页面的原因,就像插件一样。

 
<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>1696368392</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>1694436342</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>1681523912</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>

4 个答案:

答案 0 :(得分:1)

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

这应该只突出显示Level值等于3的行。当然,此解决方案基于列索引,该索引应该是之前已知的。幸运的是,jQuery处理了nth-child,缺乏原生浏览器支持,所以如果你的浏览器不支持它,你就不应该为此烦恼。

以下是我的解决方案JSFiddle

的工作演示

答案 1 :(得分:0)

你试试这个..

function hiliter(word, element) {
    var rgxp = new RegExp(word, 'g');
    var repl = '<span class="myClass">' + word + '</span>';
    element.innerHTML = element.innerHTML.replace(rgxp, repl);
}
hiliter('dolor');

答案 2 :(得分:0)

$(document).ready(function () {
    $("input:checkbox").change(function () {
        alert();
        if ($(this).prop("checked") == true) {
            $(this).closest('tr').addClass("checked");
        } else $(this).closest('tr').removeClass("checked");
    });
});
.checked {
    background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="row_0" role="row" class="odd">
        <td class="sorting_1">
            <input type="checkbox" />
        </td>
        <td>Name</td>
    </tr>
</table>

答案 3 :(得分:0)

这是你如何做到的,

1:选择标题级别位置。 2:搜索该位置的所有td值

&#13;
&#13;
var levelstatusPosition = "";

$("#SearchResultsTable th").each(function(k,v){ // find the header location of level column
  
  
  if($(v).find("a" ))
  {

     if($.trim($(this).text()) == "Level")
     {
       levelstatusPosition = k + 1; // 0 based
     }
  }
  
  });


$('#SearchResultsTable tr td:nth-child('+levelstatusPosition+')').each(function(k,v){

  if($(v).text() == 3)
  {
    $(v).parent().css("background","red")
  }
  
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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>1696368392</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>1694436342</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>1681523912</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;