Question

我想标记表格中与给定输入相等的每个元素（例如，如果我键入＆＃34; asd＆＃34;在我的表格中，我有一个单词＆＃34; wasdfa＆＃34; asd会得到标记）。我确实知道如何让事情滑入和滑出onclick等但我不知道如何用jquery检查一个潜在无限的内容表中的文本字符串。是否有循环？我怎么能得到这个做什么？

Answer 1

您可以使用正则表达式。使用jQuery.each()遍历所有表格单元格。

<强> HTML ：

<table>
    <tr>
        <td>xxx xxx</td>
        <td>asd xxx</td>
        <td>xxx asd</td>
    </tr>
    <tr>
        <td>asd</td>
        <td>xxxasdxxx</td>
        <td>asd asd</td>
    </tr>
</table>

<强> CSS ：

.yellow {
    background-color: yellow;
}

<强> JS ：

$('table td').each(function () {

    $(this).html($(this).text().replace(/asd/g, '<span class="yellow">asd</span>'));
});

/asd/g会查找字符串＆＃34; asd＆＃34;并且g使其成为全局的（如果一个单元格中存在多个匹配项）。它用相同的字符串替换它，在其周围添加<span>类yellow标记。

JSFiddle demo

修改：如果您想让它动态化，可以使用RegExp对象。

$('input').on('input', function () {

    replaceString($(this).val());
});

function replaceString(str) {

    var re = new RegExp(str, "g");

    $('table td').each(function () {

        $(this).html($(this).text().replace(re, '<span class="yellow">' + str + '</span>'));
    });
}

JSFiddle demo

Answer 2

您可以使用jquery轻松标记搜索文本。在这里，我使用了jquery的keyup方法进行了演示。我已经包含了一个带有背景颜色的跨度来标记表中搜索到的字符串。

<html>
<head>
    <style>
        span{
            color: white;
            background: red;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="search" placeholder="Enter your search string"/>
<br><br>
<div id="result"></div>
<table border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>This is me</td>
            <td>This is me</td>
            <td>This is me</td>
            <td>This is me</td>
        </tr>
        <tr>
            <td>This is me</td>
            <td>This is me</td>
            <td>This is me</td>
            <td>This is me</td>
        </tr>

    </tbody>
</table>
<script>
    $(document).ready(function(){
        $("#search").on("keyup",function(){
            $val=$("#search").val();
            $replace_text="<span>"+$val+"</span>";
            $("td, th").each(function(){
                $td_val=$(this).text();
                $td_val=$td_val.replace($val,$replace_text);
                $(this).html($td_val);
            });
        });
    });
</script>
</body>

容器中的标记文本与使用jquery的String相等

2 个答案: