Текстовый поиск JQuery: не удается получить правильный тег/элемент для поиска текста в таблице

Я использую HTML для чтения файла XML и построения таблицы. Я использую код, который нашел в учебнике w3schools.com, и эта часть работает нормально.

Я пытаюсь получить функцию поиска, чтобы найти (и, если возможно, выделить) текст в таблице. Я нашел код JQuery по адресу https://www.thriveuk.com/quick-tips-how-to-search-on-a-page-for-text-and-highlight-it/, который отлично работает на его странице. и делает именно то, что я хотел бы видеть. Он упомянул, что код можно легко изменить для поиска по всей странице, но я не могу этого понять. Я связался с разработчиком, но он не ответил.

Мне действительно нужно только искать текст в таблице. Я уверен, что ошибка поиска связана с синтаксисом, ссылающимся на область поиска, и может быть связана с тем, как таблица строится в коде. Если кто-нибудь может показать мне, что я делаю неправильно, ссылаясь на таблицу как на область поиска, я был бы признателен.

<!DOCTYPE html>
<html>

<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}

/* Style the input */
.on-page-search {
width: 65%;
font-size: 14px;
line-height: 26px;
color: #787d85;
background-color: #fcfcfc;
border: 1px solid #e0e1e1;
padding: 5px 15px;
}

/* Style the list */
.demo-links {
border-bottom: none;
padding: 5px 5px;
line-height: 36px;
}

/* Style the results */
.results {
background: #de1919;
color: white;
}
.results:hover {
background: #333;
color: white;
}

</style>

<!--  https://www.thriveuk.com/quick-tips-how-to-search-on-a-page-for-text-and-highlight-it/ -->

<body>

<p></p>
<p></p>
<p>Enter text to search this page.</p>
<p></p>

<input class="on-page-search"></input>
<p></p>
<p></p>

<script type='text/javascript'>
jQuery(document).ready(function($) {
    $(".on-page-search").on("keyup", function () {
        var v = $(this).val();
        $(".results").removeClass("results");

        //I'm pretty sure the problem is here:
        $("table td").each(function(){

            if (v != "" && $(this).text().search(new RegExp(v,'gi')) != -1) {
                $(this).addClass("results");
            }
        });
    });
}); 
</script>

<p>Click on a name to display information.</p>
<p id='showCD'></p>
<div id="data">
<table id="demo"></table>
</div>

<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "Incidents.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 
x = xmlDoc.getElementsByTagName("INC");
table="<tr><th>Last Name</th><th>First Name</th><th>Date</th><th>Type</th></tr>";
for (i = 0; i <x.length; i++) { 
    table += "<tr onclick='displayCD(" + i + ")'><td>";
    table += x[i].getElementsByTagName("LNAME")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table += x[i].getElementsByTagName("FNAME")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table += x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table += x[i].getElementsByTagName("TYPE")[0].childNodes[0].nodeValue;
    table += "</td><tr>";
  }
document.getElementById("demo").innerHTML = table;

function displayCD(i) {
  document.getElementById("showCD").innerHTML =
  "Last: " +
  x[i].getElementsByTagName("LNAME")[0].childNodes[0].nodeValue +
  "<br>First: " +
  x[i].getElementsByTagName("FNAME")[0].childNodes[0].nodeValue +
  "<br>Date: " +
  x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue +
  "<br>Offense: " + 
  x[i].getElementsByTagName("TYPE")[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>

search jquery html-table
person EdNerd    schedule 06.05.2020    source источник
comment
Я пробовал разные термины в $(table td).each(function(){. Я пробовал имя идентификатора таблицы, создавая отдельный div для таблицы и ссылаясь на него, я нашел способ ссылаться на все строки в таблице ; и различные термины для ссылки на содержание и тело документа. Решение кажется прямым и, вероятно, очевидным для других.   -  person EdNerd    schedule 07.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

Я заставил его работать! Я обнаружил инструменты разработчика в Edge и покопался в консоли. Первая ошибка не была ссылкой на jQuery, поэтому я добавил это. Тогда у меня были некоторые теги в неправильном месте. Наконец, я пробежался по элементам и понял, что мне нужно искать каждый — я также сначала не понял, что это был итеративный поиск, перебирающий каждый элемент. Это завершено, и строка таблицы с введенным текстом будет выделена. (Теперь мне просто нужно найти способ убрать выделение!)

Скорректированная страница ниже:

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}

/* Style the input */
.on-page-search {
width: 65%;
font-size: 14px;
line-height: 26px;
color: #787d85;
background-color: #fcfcfc;
border: 1px solid #e0e1e1;
padding: 5px 15px;
}

/* Style the list */
.demo-links {
border-bottom: none;
padding: 5px 5px;
line-height: 36px;
}

/* Style the results */
.results {
background: #de1919;
color: white;
}
.results:hover {
background: #333;
color: white;
}

</style>

</head>

<!--  https://www.thriveuk.com/quick-tips-how-to-search-on-a-page-for-text-and-highlight-it/ -->

<body>

<p></p>
<p></p>
<p>Enter text to search this page.</p>
<p></p>

<input class="on-page-search"></input>
<p></p>
<p></p>

<script type='text/javascript'>
jQuery(document).ready(function($) {
    $(".on-page-search").on("keyup", function () {
        var v = $(this).val();
        $(".results").removeClass("results");
        $("tr").each(function(){
            if (v != "" && $(this).text().search(new RegExp(v,'gi')) != -1) {
                $(this).addClass("results");
            }
        });
    });
}); 
</script>

<p>Click on a name to display information.</p>
<p id='showCD'></p>
<div id="data">
<table id="demo">

<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "Incidents.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 
x = xmlDoc.getElementsByTagName("INC");
table="<tr><th>Last Name</th><th>First Name</th><th>Date</th><th>Type</th></tr>";
for (i = 0; i <x.length; i++) { 
    table += "<tr onclick='displayCD(" + i + ")'><td>";
    table += x[i].getElementsByTagName("LNAME")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table += x[i].getElementsByTagName("FNAME")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table += x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue;
    table += "</td><td>";
    table += x[i].getElementsByTagName("TYPE")[0].childNodes[0].nodeValue;
    table += "</td><tr>";
  }
document.getElementById("demo").innerHTML = table;

function displayCD(i) {
  document.getElementById("showCD").innerHTML =
  "Last: " +
  x[i].getElementsByTagName("LNAME")[0].childNodes[0].nodeValue +
  "<br>First: " +
  x[i].getElementsByTagName("FNAME")[0].childNodes[0].nodeValue +
  "<br>Date: " +
  x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue +
  "<br>Offense: " + 
  x[i].getElementsByTagName("TYPE")[0].childNodes[0].nodeValue;
}
</script>

</table>
</div>
</body>
</html>
person EdNerd    schedule 07.05.2020