javascript - 在单元格过滤器突出显示上保留链接标记

Question

我的突出显示有问题，我似乎找不到解决方案。我有一个表格和一个输入框。

在输入框中键入内容时，表格会根据输入框中的内容进行排序。为了阐明正在搜索的内容，我突出显示了与输入值匹配的所有字符(在表中)，如下例所示:

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.

这很好用，但有一个问题。单元格中的某些值是可点击的(因此它们是带有标签的链接)，它们会将用户重定向到属于该单元格值的页面。当这些可点击值之一与输入值匹配时，它们会突出显示，但它们也会丢失链接标记。我想知道是否可以在搜索期间和之后保存链接标记。

我使用以下 JQuery 和 HTML 代码:

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>
    </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">&times;</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);
    });
};

Answer 1

这段代码模拟了您要实现的目标。突出显示时，元素不会失去其“重定向”属性:

<!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>