Question

我有这个脚本用于在表格中搜索“输入”中突出显示的值。但仅适用于所有TR中的第一个TD。

功能删除突出显示

function removeHighlighting(highlightedElements){
   highlightedElements.each(function(){
       var element = $(this);
       element.replaceWith(element.html());
  })
}

功能添加突出显示

function addHighlighting(element, textToHighlight){
   var text = element.text();
   var highlightedText = '<em>' + textToHighlight + '</em>';
   var newText = text.replace(textToHighlight, highlightedText);

   element.html(newText);
}

在表格中搜索但仅在TR中的第一个TD中搜索

$("#search").on("keyup", function() {
var value = $(this).val();

removeHighlighting($("table tr em"));

$("table tr").each(function(index) {
    if (index !== 0) {
        $row = $(this);

        var $tdElement = $row.find('td:first');
        var id = $tdElement.text();
        var matchedIndex = id.indexOf(value);

        if (matchedIndex != 0) {
            $row.hide();
        }
        else {
            addHighlighting($tdElement, value);
            $row.show();
        }
    }
  });
});

我不知道如何在所有TD中搜索以及如何编写例如如果“matchedIndex == -1”（如果未从输入中找到某些值），则会发出一些警告

Answer 1

尝试在TR的所有TD中循环

$("table tr").each(function(index) {
    if (index !== 0) {
        row = $(this);

        $("td", this).each(function(idx) {
          var id = $(this).text(); //or $(this).innerText
          var matchedIndex = id.indexOf(value);

          if (matchedIndex != 0) {
            $row.hide();
          }
          else {
            addHighlighting($tdElement, value);
            $row.show();
          }
        }
    }
  });

Answer 2

简短的方法

$("table tr > td em").each(function(){  
    $( this ).replaceWith(   $( this ).text() );    
});

Answer 3

添加带有突出显示类的span标记是评论中建议的方式。

请在下面jsFiddle找到一个有效的演示。

有一个非常有用的功能可以删除所有跨度的包装。您可以使用$('span.highlight').contents().unwrap()。

执行此操作

要查找文字，您可以使用string.search(searchText)或string.match(searchText)。如果找不到任何内容，则search方法将返回-1，如果找到则返回文本的位置。并且match将在searchText中返回出现。

为了测试它发现第一次出现我在表中添加了TestY。标志matched负责此行为。如果你要删除它，它会突出显示两个TestY元素。

(function () {
    
    var removeHighlight = function () {
        $('span.highlight').contents().unwrap();
    };

    var wrapContent = function (index, $el, text) {
        var $highlight = $('<span class="highlight"/>')
            .text(text.substring(0, index));
        //console.log(text.substring(0, index));
        var normalText = document.createTextNode(text.substring(index, text.length));
        //console.log(index, $highlight.text(), normalText);
        $el.html($highlight).append(normalText);
    };

    var highlightTextInTable = function ($tableElements, searchText) {
        // highlights if text found (during typing)
        var matched = false;
        //remove spans
        removeHighlight();

        $.each($tableElements, function (index, item) {
            var $el = $(item);
            if ($el.text().search(searchText) != -1 && !matched) {
                //console.log("matched", $el, $el.html());
                wrapContent(searchText.length, $el, $el.html());
                //console.log(searchText, $el.text());
                if (searchText == $el.text()) {
                    // found the entry
                    //console.log("matched");
                    matched = true;
                }
            }
        });
    };

    $(function () {
        //load table into object
        var $tableRows = $('table tr');
        var $tableElements = $tableRows.children();

        //console.log($tableRows, $tableElements);

        $('#search').on('keyup', function (e) {
            var searchText = $(this).val();
            if (searchText.length == 0) {
                // catches false triggers with empty input (e.g. backspace delete or case lock switch would trigger the function)
                removeHighlight(); // remove last remaining highlight
                return;
            }
          
            highlightTextInTable($tableElements, searchText);

        });
    });

})();

.highlight {
    background-color: #00FFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" />
<table>
    <tr>
        <td>TestX</td>
        <td>Test1.2</td>
        <td>Test1.3</td>
        <td>Test1.4</td>
    </tr>
    <tr>
        <td>Test2.1</td>
        <td>TestY</td>
        <td>Test2.3</td>
        <td>Test2.4</td>
    </tr>
    <tr>
        <td>Test3.1</td>
        <td>TestY</td>
        <td>Test3.3</td>
        <td>Test3.4</td>
    </tr>
</table>

使用突出显示在所有TD中查找值

3 个答案: