从具有文本匹配的tr中选择一个td并添加类

Question

我是网络开发的新手。我有一个结构简单的桌子。在这里，我想找到一个包含td值"abc"的tr，然后将该类添加到该tr。我可以将它添加到td但不能添加到tr。请帮忙。

var container = document.querySelector("[id^='taTextElement']").id;

var match = "Duration";
$('#'+container +' ' +'table tr').each(function() { }

还有一件事，表ID也在那里。所以，有谁可以帮我这个？

这里我没有添加ID部分。

HTML -

<table border="1"> <tbody><tr><td> Designation :</td><td></td></tr><tr><td> Duration :</td><td>JANUARY 2015 to APRIL 2015</td></tr><tr><td> Technologies : </td><td>Tritium, Sublime Text, Firefox, Chrome, Action Script, HTML, CSS, Javascript, jQuery</td></tr><tr><td> Team Size: </td><td></td></tr><tr><td> URl : </td><td></td></tr><tr><td> Employer :</td><td></td></tr><tr><td> Client : </td><td></td></tr><tr><td> Domain : </td><td></td></tr><tr><td> Roles and responsibility : </td><td>Contribution:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Using Client API in this project had to fix many issues while mobilizing the desktop site  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Code validation, Unit testing, Manual testing done for every task. &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;  &nbsp;</td></tr><tr><td> Description: </td><td>Description:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; As a part of this project we were mobilize the desktop websites.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr></tbody></table>

Answer 1

您可以使用:contains选择器，如：

$(function() {
  var toSearch = "Island"; /* Word to seach */
  $("#table1 td:contains(" + toSearch + ")").parent().addClass('selected');
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.selected {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table1">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

---

对于精确搜索，您可以使用filter

您可以使用：

var toSearch = "Francisco Chang"; /* Word to seach */
$("#table1 td").filter(function(){ return $(this).text().trim() === toSearch }).parent().addClass('selected');

Answer 2

如果您能够选择td，则可以使用jQuery.parent ()方法获取tr并添加该类。

所以在你的.each function

var tds = $(this).children ().filter (function(){return $(this).text () == 'abc';});
tds.each (function (){
  $(this).addClass (yourClass) ; 
  $(this).parent ().addClass (trClass);
});

Answer 3

作为比较，您可以通过以下方式在POJS中执行此操作：

1. 将表中的单元格作为数组（或具有forEach的NodeList，请参见下文）
2. 循环遍历单元格并向包含匹配文本的行添加“突出显示”类

由于大多数浏览器现在在NodeLists上实现forEach，因此可以在querySelectorAll返回的NodeList上调用它。否则，您可能需要首先将NodeList转换为数组（例如，使用Array.from（NodeList））。

function highlighTRWithText(text) {
  document.querySelectorAll('#table0 td')
    .forEach(cell => { 
      if (cell.textContent.indexOf(text) > -1) cell.parentNode.classList.add('highlight');
    });
}

window.onload = function(){
  highlighTRWithText('Team Size');
}

.highlight {
  background-color: red;
}

<table id="table0" border="1">
  <tbody>
    <tr>
      <td> Designation :</td>
      <td></td>
    </tr>
    <tr>
      <td> Duration :</td>
      <td>JANUARY 2015 to APRIL 2015</td>
    </tr>
    <tr>
      <td> Technologies : </td>
      <td>Tritium, Sublime Text, Firefox, Chrome, Action Script, HTML, CSS, Javascript, jQuery</td>
    </tr>
    <tr>
      <td> Team Size: </td>
      <td></td>
    </tr>
    <tr>
      <td> URl : </td>
      <td></td>
    </tr>
    <tr>
      <td> Employer :</td>
      <td></td>
    </tr>
    <tr>
      <td> Client : </td>
      <td></td>
    </tr>
    <tr>
      <td> Domain : </td>
      <td></td>
    </tr>
    <tr>
      <td> Roles and responsibility : </td>
      <td>Contribution:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Using Client API in this project had to fix many issues while mobilizing the desktop site &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Code validation, Unit testing, Manual testing
        done for every task. &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;</td>
    </tr>
    <tr>
      <td> Description: </td>
      <td>Description:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; As a part of this project we were mobilize the desktop websites. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

      </td>
    </tr>
  </tbody>
</table>