保留单元格过滤器突出显示的链接标记 [英] Retain link tag on cell filter highlight
本文介绍了保留单元格过滤器突出显示的链接标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我突出显示了一个问题，我似乎找不到解决方案。
我有一张桌子&一个输入框。
在输入框中输入时，表格将根据输入框中的内容进行排序。为了澄清正在搜索的内容，我已经突出显示了与输入值匹配的所有字符（在表中），如下例所示：
input：Book in t
单元格值：今天我正在阅读一本
花园书。
这样做的目的是澄清值与
匹配的地方。
这很好，但它有一个问题。单元格中的某些值是可点击的（因此它们是链接的标记），并将用户重定向到属于该单元格值的页面。当其中一个可点击的值与输入值匹配时，它们确实会突出显示，但它们也会丢失链接标记。我想知道是否可以在搜索期间和搜索后保存链接标记。
我使用以下JQuery& HTML代码：
HTML（客户端）：
< table class =table table-responsive table-striped>
< thead>
< tr class =tableRow>
< td colspan =2>< input type =searchclass =form-control tableFilterplaceholder =Filter ...>< / td>
< / tr>
< tr>
< th>名称< / th>
< th>定义< / th>
< th>操作< / th>
< / tr>
< / thead>
< tbody>
<！ - Defintions - >
< tr class =filterRow>
<！ - 自动定义 - >
< td class =col-lg-4 hl filter>< span>＃< / span>< / td>
< td class =col-lg-7 hl filter>< span>附录< / span>< / td>
< td class =col-lg-1>< / td>
< / tr>
< tr class =filterRow>
<！ - 自动定义 - >
< td class =col-lg-4 hl filter>< span>手臂长度（原则）< / span>< / td>
< td class =col-lg-7 hl filter>< span>在相同条款下与相关公司之间做生意
和
条件与不相关
公司会< / span>
< / td>
< td class =col-lg-1>< / td>
< / tr>
HTML：
< table class =table table-responsive table-striped>
< thead>
< tr class =tableRow>
< td colspan =2>< input type =searchclass =form-control tableFilterplaceholder =Filter .../>< / td>
<！ - < td>< input type =searchclass =form-control tableFilterplaceholder =Filter .../>< / td> - >
< / tr>
< tr>
< th>名称< / th>
< th>定义< / th>
< th>操作< / th>
< / tr>
< / thead>
< tbody>
<！ - Defintions - >
@ {
foreach（Model.DefinitionList中的Uid定义定义）
{
< tr class =filterRow>
<！ - 自动定义 - >
@if（definition.Target！= null）
{
< td class =col-lg-4 hl filter> @ Quick.LinkForLinkable（Html，definition.Target） < / TD>
< td class =col-lg-7 hl filter> @ definition.Explanation< / td>
< td class =col-lg-2>
<！ - - 编辑 - >
< a href =＃edit-@definition.Idclass =glyphicon glyphicon-edit editCustom-formdata-toggle =modaldata-target =＃edit-@definition.Id> ;< / A>
<！ - - 对话框窗口 - >
< div id =edit-@definition.Idclass =modal fade modal-sm editCustom-formrole =dialog>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modal>& times;< / button>
< h4 class =modal-title>编辑定义< / h4>
< / div>
< div class =modal-body>
< form action =/ Api / @ Model.ApiName / @ definition.Idmethod =PATCH>
< label class =col-lg-12>
名称：
< input class =form-controltype =textname =Nameplaceholder =Namevalue =@ definition.Termdisabled />
< / label>
< label class =col-lg-12>
定义：
< input class =form-controltype =textname =Explanationplaceholder =Definitionvalue =@ definition.Explanation/>
< / label>
< / form>
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-default modal-canceldata-dismiss =modal>取消< / button>
< button type =buttonclass =btn btn-success modal-create addNewdata-dismiss =modal>确认< / button>
< / div>
< / div>
< / div>
< / div>
< / td>
JQuery：
//基于输入
$（。tableFilter）的表格过滤器keyup（function（）{
var rows = $ （.table）。find（tbody tr）;
//过滤jquery对象以获得结果
if（this.value.length> 0）{
/ /首先隐藏所有用于标识匹配行的类并删除它们。
rows.removeClass（match）。hide（）。filter（function（）{
var match = false;
$（ this）.find（td.filter）。each（function（）{
var indexOf = $（this）.text（）。toLowerCase（）。indexOf（$（。tableFilter）。val ）.toLowerCase（））;
//检查indexOf，如果此行单元格包含搜索字符串
if（indexOf！== -1）{
match = true;
return ;
}
}）;
返回m ATCH;
}）。addClass（match）。show（）;
} else {
//如果未提供过滤器显示全部
rows.removeClass（match）。show（）。find（b）。contents（）。unwrap
}
highlight（this.value）;
}）;
var highlight = function（string）{
$（。table）。find（tbody tr.match td.filter）。each（function（）{
if（$（this）.text（）。indexOf（string）=== -1）
return;
matchStartIndex = $（this）.text（ ）.toLowerCase（）。indexOf（string.toLowerCase（））;
var matchEndIndex = matchStartIndex + string.length - 1;
var beforeMatch = $（this）.text（）。 slice（0，matchStartIndex）;
var matchText = $（this）.text（）。slice（matchStartIndex，matchEndIndex + 1）;
var afterMatch = $（this）.text（）。slice matchEndIndex + 1）;
//这里将选定的文本设置为粗体样式
$（this）.html（beforeMatch +< b>+ matchText +< / b> ;+ afterMatch）;
}）;
};
解决方案
这段代码模拟您正在尝试的内容实现。突出显示时，元素不会丢失其重定向属性：
<！DOCTYPE html>
< html>
< head>
< title>页面标题< / title>
< / head>
< body>
< style>
.highlight {background-color：＃FFFF00; }
td {
border：1px纯红色;
}
< / style>
< script
src =https://code.jquery.com/jquery-2.2.4.min.js
integrity =sha256-BbhdlvQf / xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 =
crossorigin =匿名>< / script>
< script>
函数highlightIt（t）{
var inputText = $（t）.val（）; $（'＃theTable'）。
for（i = 0; i <$（'＃theTable'）。find（'tr'）。length; i ++）{
var nthElement = $（'＃theTable'）。find 'TR：当量（' + I + '）'）; $ j
（j = 0; j <$（nthElement）.find（'td'）.length; j ++）{
var highlightedSpan = $（nthElement）.find（'p：eq（' + j +'）a span：eq（0）'）;
var notHighlightedSpan = $（nthElement）.find（'p：eq（'+ j +'）a span：eq（1）'）;
var txtVal = $（notHighlightedSpan）.text（）; （$（highlightSpan）.text（）。concat（txtVal）.includes（inputText））{
$（notHighlightedSpan）.text（$（highlightedSpan）.text（）。 concat（$（notHighlightedSpan）.text（））。replace（inputText，''））;
$（highlightedSpan）.text（inputText）;
$ else {
$（notHighlightedSpan）.text（$（highlightedSpan）.text（）。concat（$（notHighlightedSpan）.text（）））;
$（highlightedSpan）.text（''）;
}
}
}
}
< / script>
< table id =theTable>
< tr>
< td>< p>绝对网址：< a href =https://www.w3schools.com>< span class =highlight>< / span>< ;跨度> W3Schools的< /跨度>< / A>< / p>< / TD>
< td>< p>绝对网址：< a href =https://www.google.es>< span class =highlight>< / span>< ;跨度>谷歌< /跨度>< / A>< / p>< / TD>
< / tr>
< tr>
< td>< p>绝对网址：< a href =https://netbeans.org/>< span class =highlight>< / span><跨度>&的NetBeans LT; /跨度>< / A>< / p>< / TD>
< td>< p>绝对网址：< a href =http://www.eclipse.org>< span class =highlight>< / span>< ;跨度> Eclipse的< /跨度>< / A>< / p>< / TD>
< / tr>
< / table>
搜寻：< input id =theInputoninput =highlightIt（this）/>
< / body>
< / html>
I have an issue with my highlighting I can't seem to find the solution to. I have a table & an input box.
When typing in the input box, the table is being sorted depending on what is in the input box. To clarify what is being searched for, I have highlighted all characters (in the table) that match the input value like in the following example:
input: Book in t
Cell value: Today I am reading a book in the garden.
The purpose of this would be to clarify where the value matches with your input.
This works great, but it has an issue. Some values in the cells are clickable (so they are links with an tag) and they redirect the user to the page that belongs to that cell value. When one of these clickable values have a match with the input value, they do highlight, but they also lose their link tag. I am wondering if it is possible for the link tag to be saved during and after searching.
I use the following JQuery & HTML code:
HTML (Client Side):
<table class="table table-responsive table-striped">
<thead>
<tr class="tableRow">
<td colspan="2"><input type="search" class="form-control tableFilter" placeholder="Filter..."></td>
</tr>
<tr>
<th>Name</th>
<th>Definition</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!--Defintions-->
<tr class="filterRow">
<!--Automated Definitions-->
<td class="col-lg-4 hl filter"><span>#</span></td>
<td class="col-lg-7 hl filter"><span>Appendix</span></td>
<td class="col-lg-1 "></td>
</tr>
<tr class="filterRow">
<!--Automated Definitions-->
<td class="col-lg-4 hl filter"><span>Arm's Length (Principle)</span></td>
<td class="col-lg-7 hl filter"><span>To do business
between Related Companies under the same terms and
conditions as unrelated
companies would</span>
</td>
<td class="col-lg-1 "></td>
</tr>
HTML:
<table class="table table-responsive table-striped">
<thead>
<tr class="tableRow">
<td colspan="2"><input type="search" class="form-control tableFilter" placeholder="Filter..." /></td>
<!--<td><input type="search" class="form-control tableFilter" placeholder="Filter..." /></td>-->
</tr>
<tr>
<th>Name</th>
<th>Definition</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!--Defintions-->
@{
foreach (UIDefinition definition in Model.DefinitionList)
{
<tr class="filterRow">
<!--Automated Definitions-->
@if (definition.Target != null)
{
<td class="col-lg-4 hl filter">@Quick.LinkForLinkable(Html, definition.Target)</td>
<td class="col-lg-7 hl filter">@definition.Explanation</td>
<td class="col-lg-2">
<!--Edit-->
<a href="#edit-@definition.Id" class="glyphicon glyphicon-edit editCustom-form" data-toggle="modal" data-target="#edit-@definition.Id"></a>
<!--Dialog Window-->
<div id="edit-@definition.Id" class="modal fade modal-sm editCustom-form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit definition</h4>
</div>
<div class="modal-body">
<form action="/Api/@Model.ApiName/@definition.Id" method="PATCH">
<label class="col-lg-12">
Name:
<input class="form-control" type="text" name="Name" placeholder="Name" value="@definition.Term" disabled/>
</label>
<label class="col-lg-12">
Definition:
<input class="form-control" type="text" name="Explanation" placeholder="Definition" value="@definition.Explanation" />
</label>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default modal-cancel" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success modal-create addNew" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
</div>
</td>
}
JQuery:
//Table Filter based on input
$(".tableFilter").keyup(function () {
var rows = $(".table").find("tbody tr");
//Filter the jquery object to get results.
if (this.value.length > 0) {
//First hide all and remove class used to identify matched rows
rows.removeClass("match").hide().filter(function () {
var match = false;
$(this).find("td.filter").each(function () {
var indexOf = $(this).text().toLowerCase().indexOf($(".tableFilter").val().toLowerCase());
//Check with indexOf if this row cell include search string
if (indexOf !== -1) {
match = true;
return;
}
});
return match;
}).addClass("match").show();
} else {
//If filter not provided show all
rows.removeClass("match").show().find("b").contents().unwrap
}
highlight(this.value);
});
var highlight = function (string) {
$(".table").find("tbody tr.match td.filter").each(function () {
if ($(this).text().indexOf(string) === -1)
return;
var matchStartIndex = $(this).text().toLowerCase().indexOf(string.toLowerCase());
var matchEndIndex = matchStartIndex + string.length - 1;
var beforeMatch = $(this).text().slice(0, matchStartIndex);
var matchText = $(this).text().slice(matchStartIndex, matchEndIndex + 1);
var afterMatch = $(this).text().slice(matchEndIndex + 1);
//Here set selected text to e.g. bold style
$(this).html(beforeMatch + "<b>" + matchText + "</b>" + afterMatch);
});
};
解决方案
This snippet of code simulates what you're trying to achieve. When highlighted, the elements do not lose their 'redirecting' property:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<style>
.highlight { background-color:#FFFF00; }
td{
border: 1px solid red;
}
</style>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
function highlightIt(t) {
var inputText=$(t).val();
for (i = 0; i < $('#theTable').find('tr').length; i++) {
var nthElement=$('#theTable').find('tr:eq('+i+')');
for (j = 0; j < $(nthElement).find('td').length; j++) {
var highlightedSpan=$(nthElement).find('p:eq('+j+') a span:eq(0)');
var notHighlightedSpan=$(nthElement).find('p:eq('+j+') a span:eq(1)');
var txtVal=$(notHighlightedSpan).text();
if($(highlightedSpan).text().concat(txtVal).includes(inputText)){
$(notHighlightedSpan).text($(highlightedSpan).text().concat($(notHighlightedSpan).text()).replace(inputText, ''));
$(highlightedSpan).text(inputText);
}else{
$(notHighlightedSpan).text($(highlightedSpan).text().concat($(notHighlightedSpan).text()));
$(highlightedSpan).text('');
}
}
}
}
</script>
<table id="theTable">
<tr>
<td><p>An absolute URL: <a href="https://www.w3schools.com"><span class="highlight"></span><span>W3Schools</span></a></p></td>
<td><p>An absolute URL: <a href="https://www.google.es"><span class="highlight"></span><span>Google</span></a></p></td>
</tr>
<tr>
<td><p>An absolute URL: <a href="https://netbeans.org/"><span class="highlight"></span><span>NetBeans</span></a></p></td>
<td><p>An absolute URL: <a href="http://www.eclipse.org"><span class="highlight"></span><span>Eclipse</span></a></p></td>
</tr>
</table>
Search:<input id="theInput" oninput="highlightIt(this)"/>
</body>
</html>
这篇关于保留单元格过滤器突出显示的链接标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
