在 jQuery 中，如何找到包含特定文本的单元格的行？

Question

我有以下 HTML 表格 ...

<table>
    <tr id="result1">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result2">
        <td class="title">Apple</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result3">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result4">
        <td class="title">Lemon</td>
        <td>12</td>
        <td>37</td>
    </tr>
</table>

假设我有第一行...

var $tr = $('#result1');
var title = $tr.find('td.title').text();

如何在 jQuery 中找到表中所有其他具有 TD 单元格的行，该单元格的类为“title”，其文本与我在“title”变量中的文本匹配？请注意，在上面的示例中，唯一的结果将是 id="result3" 的行。

Answer 1

JSFIDDLE

我刚刚搜索了 tr，除了我选择。然后我在我选择的 title

上匹配它的 title

let allRow = $("tr");
let selectedRow = $("tr#result1")
let selectedRowValue = selectedRow.children(".title").text();

for (let i = 0, imax = allRow.length; i < imax; i++) {

  if (allRow.not(selectedRow).eq(i).children(".title").text() == selectedRowValue) {
    alert(allRow.not(selectedRow).eq(i).attr("id"))
  }

}

欢迎提问：）

Answer 2

您可以使用$("table tr:not(:first-child)") 作为选择器。这将选择所有 tr （除了第一个，因为您已经查询过它）。使用filter 循环通过tr 并检查文本。

var $tr = $('#result1');
var title = $tr.find('td.title').text();

var rows = $("table tr:not(:first-child)").filter(function() {
  return $(this).find('.title').text() === title;
});

//For testing | add class to the result
rows.addClass("select");

.select {
  background-color : pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr id="result1">
    <td class="title">Orange</td>
    <td>12</td>
    <td>37</td>
  </tr>
  <tr id="result2">
    <td class="title">Apple</td>
    <td>12</td>
    <td>37</td>
  </tr>
  <tr id="result3">
    <td class="title">Orange</td>
    <td>12</td>
    <td>37</td>
  </tr>
  <tr id="result4">
    <td class="title">Lemon</td>
    <td>12</td>
    <td>37</td>
  </tr>
</table>

---

如果要排除tr的具体id而不是order，可以：

这将排除 id 为 #result1 的 tr

var $tr = $('#result1');
var title = $tr.find('td.title').text();

var rows = $("table tr:not(#result1)").filter(function() {
    return $(this).find('.title').text() === title;
})

Answer 3

要使用jQuery查询包含特定文本的元素，可以使用:contains() selector。

在下面的 sn-p 中，我查询了所有包含 title 的 td，然后过滤掉了 td 的子 $tr。

然后我遍历剩余的查询 td 并打印他们的 tr 的 ID。

var $tr = $('#result1');
var title = $tr.find('td.title').text();

// Get all td.title containing title text
var $tdTitle = $(`td.title:contains(${title})`);

// Filter out the result that is under $tr
var $otherTdTitle = $tdTitle.filter(function(index, td) {
  return $(td).parent().attr('id') !== $tr.attr('id');
});

$otherTdTitle.each(function(index, td) {
  console.log($(td).parent().attr('id'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr id="result1">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result2">
        <td class="title">Apple</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result3">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result4">
        <td class="title">Lemon</td>
        <td>12</td>
        <td>37</td>
    </tr>
</table>

Answer 4

您只需将建议的:contains() 选择器与parent() 或parents() 结合起来。检查下面的代码。

var selector = $("td:contains('Orange')").parent('tr');
$(selector).addClass('highlighted');

.highlighted {
background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr id="result1">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result2">
        <td class="title">Apple</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result3">
        <td class="title">Orange</td>
        <td>12</td>
        <td>37</td>
    </tr>
    <tr id="result4">
        <td class="title">Lemon</td>
        <td>12</td>
        <td>37</td>
    </tr>
</table>