我想创建一个表,一个过滤器,其凸显的同时显示搜索结果已搜索的关键字。
我喜欢这个问题的答案:live highlight a word(s) with jQuery但我无法弄清楚如何实现它在我现有的代码。
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">
<table id="myTable">
<tr>
<td>
<h1>Text</h1>
<p><span class="red">Text</span></p>
<p>Text</p>
</td>
<td><img src=".."></td>
</tr>
<td>
<h1>Text</h1>
<p><span class="red">Text</span></p>
<p>Text</p>
</td>
<td><img src=".."></td>
</table>
能否请您试试这个
function createTagAndAppendTo(tag, txt, elem){
let customTag = document.createElement(tag);
customTag.textContent = txt;
elem.append(customTag);
}
function myFunction(evt) {
// Declare variables
let input, filter, table, tr, td, i, txtValue;
let displayTr = [];
filter = evt.value;
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
let regExp = new RegExp(filter);
if (!filter) {
for (let i = 0; i < tr.length; i++) {
tr[i].style.display = '';
}
return;
}
// Loop through all table rows, and hide those who don't match the search query
for (let i = 0; i < tr.length; i++) {
let trStyle = tr[i].style.display;
td = tr[i].getElementsByTagName("td");
for (let j = 0; j < td.length; j++) {
txtValue = td[j].textContent;
let count = (txtValue.match(regExp) || []).length;
displayTr[i] = displayTr[i] ? displayTr[i] : count;
if (count !== 0) {
td[j].innerText = '';
let strArray = txtValue.split(filter);
let loopLength = strArray.length - 1;
for (let i = 0; i < loopLength; i++) {
createTagAndAppendTo('span', strArray[i], td[j]);
createTagAndAppendTo('mark', filter, td[j]);
}
createTagAndAppendTo('span', strArray[loopLength], td[j]);
} else {
let tdStr = td[j].textContent;
td[j].innerText = '';
td[j].textContent = tdStr;
}
}
if(displayTr[i] !== 0) {
tr[i].style.display = '';
} else {
tr[i].style.display = 'none';
}
}
}
<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search...">
<table id="myTable">
<tr>
<td>...</td>
<td>success</td>
<td>Substring</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>