JQuery текстовый поиск: невозможно найти нужный тег / элемент для поиска текста в таблице - PullRequest
Новая
       2

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

0 голосов
/ 06 мая 2020

Я использую 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>

1 Ответ

0 голосов
/ 08 мая 2020

У меня заработало! Я обнаружил инструменты разработчика в 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>
...