В jQuery, как найти строки, в которых есть ячейка с определенным текстом? - PullRequest
Новая
       6

В jQuery, как найти строки, в которых есть ячейка с определенным текстом?

0 голосов
/ 19 апреля 2019

У меня есть следующая таблица 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".

Ответы [ 4 ]

0 голосов
/ 22 апреля 2019

Вам просто нужно объединить предложенный :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>
0 голосов
/ 19 апреля 2019

Вы можете использовать $("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 вместо заказа, вы можете:

Это исключит tr с идентификатором #result1

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

var rows = $("table tr:not(#result1)").filter(function() {
    return $(this).find('.title').text() === title;
})
0 голосов
/ 19 апреля 2019

Чтобы запросить элемент, содержащий определенный текст, с помощью jQuery, вы можете использовать :contains() selector.

В приведенном ниже фрагменте я запросил все td, которые содержат title, а затем фильтриз td, который является потомком $tr.

, я затем перебираю оставшиеся запрошенные td и печатаю их 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'));
});
<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>
0 голосов
/ 19 апреля 2019

JSFIDDLE

Я только что искал через tr, кроме как выбрать. затем я сопоставляю его заголовок на моем выбранном заголовке 

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"))
  }

}

не стесняйтесь спрашивать:)

...