Question

我有一个网格视图控件，当我搜索网格视图项时，列中有标题html文本框用于搜索我需要应用颜色，我该如何应用颜色搜索单词。

我的代码：

<asp:TemplateField HeaderText="Element" Visible="true" HeaderStyle-Width="30%" ItemStyle-Width="30%">
                                    <HeaderTemplate>
                                        Speciality<br><input name="DynamicTextBox" id="txtElement" type="text" style="width: 120px" placeholder="Search Speciality" />
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblElement" runat="server" Text='<%#Bind("Element") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField> 



    <script>       
            $(document).ready(function () {
                $('#<%=GridView1.ClientID %>').hide();
                var values = eval('<%=Values%>');
                var InfoVal = localStorage.getItem("Info");            
                DataTable();
                SearchValue(values);
                $('#<%=GridView1.ClientID %>').show();
            });
            function bindDataTable(value) {

                $('#<%=GridView1.ClientID %> th').each(function () {
                    var title = $(this).text();
                    if (title == "Name" || title == "PName" || title == "Element") {
                        if (title == "Name"  || title == "PName") {
                            title1 = title.replace(" ", "");
                        }
                        if (title == "Element") {
                            title1 = title;
                        }
                        $(this).html(title + '<br/><input  name = "DynamicTextBox" id="txt' + title1 + '" type="text" style="width:120px" placeholder="Search ' + title + '" />');
                    }
                    else {
                        $(this).html(title + '<br/><br/>  ');
                    }
                });
            };
            var table;
            function DataTable() {
                table = $('#<%=GridView1.ClientID %>').prepend($('<thead></thead>').append($('#<%=GridView1.ClientID %>').find('tr:first'))).DataTable({
                    "paging": true,
                    "ordering": false,
                    "info": false,
                    "pageLength": 10,
                    "bLengthChange": false,
                });
                var PageVal = localStorage.getItem("PageNum");
                if (PageVal == null) {
                    PageVal = 0;
                }
                if (PageVal >= 1) {
                    PageVal = PageVal - 1;
                }
                if (PageVal == "") {
                    PageVal = 0;
                }


                table.page(PageVal).draw('page');            
                localStorage.removeItem("PageNum");
                table.columns().every(function () {
                    var that = this;
                    $('input', this.header()).on('keyup change', function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value).draw();
                        }
                    });
                });

            };
            function SearchValue(values) {
                if (values != null || values != "") {
                    if (typeof values !== "undefined") {
                        var i = values[0];
                        $('#txtElement').val(i);
                        var j = values[1];
                        $('#txtName').val(j);
                        var k = values[2];
                        $('#txtName').val(k);

                        table.columns().every(function () {
                            var that = this;
                            $('input', this.header()).load('keyup change', function () {
                                if (that.search() !== this.value) {
                                    that
                                        .search(this.value).draw();
                                }
                            });
                        });
                    }
                }
            };


            var idClicked;
            $(function () {
                $('#<%=TextBoxContainer.ClientID %>').click(function (e) {
                    idClicked = "Clicked";
                    var info = table.page.info();
                    var currPag = info.page + 1;
                    var All = info.pages;

                    if (currPag != 0 || currPag <= All) {
                        localStorage.setItem("PageNum", "");
                        localStorage.setItem("PageNum", currPag);
                        localStorage.setItem("Info", "Clicked");
                    }
                });
            });

        </script>

Answer 1

以下是您如何做的一个小例子。

var text = $("#textBox").html();
var word = "it";
var wordRegExp = new RegExp("it", "gi");
text = text.replace(wordRegExp, '<span class="highlighted">' + word + '</span>');
$("body").html(text);

.highlighted {
  background: yellow;
}

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <div id="textBox">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</body>

如何应用背景颜色搜索高位词Jquery DataTable

1 个答案: