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

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而不是顺序，则可以：

这将排除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。

在下面的代码段中，我查询了所有包含td的{{1}}，然后过滤掉了title的子级td。

然后我遍历其余查询的$tr并打印其td的ID。

tr

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

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>

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

4 个答案: