Question

我想突出显示Bootstrap中的正常标题表行，如果正常表行或＆＃34; child＆＃34;折叠表行包含至少一个来自数组的关键字。

我们说我有一系列关键字。 2.，4.，6。表行在Bootstrap中折叠，它们是其父级的子级（不是DOM的意义）。 1. <tr>在标题中包含keyword1。 4.折叠表行还包含keyword2。

到目前为止，我设法制作了这个部分胖乎可用的解决方案。问题是，当折叠的表行包含关键字时，它不会突出显示＆＃34; parent＆＃34;行。

工作示例：http://www.bootply.com/WYvFXheQlN

JS

<script type='text/javascript'>
$(document).ready(function() {
   $("tr:contains(keyword1)" ).addClass("yellow");
   $("tr:contains(keyword2)" ).addClass("yellow");
});
</script>

CSS

.yellow {
    background-color: yellow;
}

HTML

<div class="container">
  <div class="row">
    <table class="table table-hover table-responsive">
      <tbody>
        <tr>
          <td>
            <a>Title1 keyword1 ...</a>
          </td>
          <td class="text-right">
            <a data-toggle="collapse" href="#collapse1">Open</a>
          </td>
        </tr>
        <tr class="collapse" id="collapse1">
          <td colspan="2">
            ...lorem ipsum ...
          </td>
        </tr>
        <tr>
          <td>
            <a>Title2 ...</a>
          </td>
          <td class="text-right">
            <a data-toggle="collapse" href="#collapse2">Open</a>
          </td>
        </tr>
        <tr class="collapse" id="collapse2">
          <td colspan="2">
            .... keyword2 lorem ipsum ...
          </td>
        </tr>
        <tr>
          <td>
            <a>Title3</a>
          </td>
          <td class="text-right">
            <a data-toggle="collapse" href="#collapse3">Open</a>
          </td>
        </tr>
        <tr class="collapse" id="collapse3">
          <td colspan="2">
            ... lorem ipsum ...
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

很自然地，我尝试了使用DOM和jQuery的不同变体。将子行插入父行似乎是个好主意。我尝试使用jQuery的函数parent（），parents（）或nearest（）但是，两种解决方案都没有采用正确的表行并突出显示它。

以下代码也有效但从不突出显示父<tr>：

       <tr>
          <td>
            <a>Title2 ...</a>
          </td>
          <td class="text-right">
            <a data-toggle="collapse" href="#collapse2">Open</a>
          </td>
          <tr class="collapse" id="collapse2">
             <td colspan="2">
               ...lorem ipsum keyword2...
             </td>
          </tr>
        </tr>

任何人都可以帮助我吗？ 如何在关键字位于子表格行内容时突出显示父表格行？

p.s.bonus：这是我解决的第一个代码。关键字在字符串中，代码仅突出显示关键字本身。

<script type='text/javascript'>
$(document).ready(function() {
    var regex = /('keyword1|keyword2|...')/g;
    $(\'tbody\').each(function() {
        var $this = $(this);
        var text = $this.text();
        if (regex.test(text)) {
            $this.html( $this.html().replace(regex, \'<span class="yellow">$1</span>\') );
        }
    });
});
</script>

如何通过在折叠行中查找关键字来突出显示Bootstrap父表行？

0 个答案: