需要有关数据表上单词搜索的帮助。我对编码不是很有经验。我拼凑了一个对姓氏列的搜索,它工作正常。我希望它从第一个字母开始搜索,而不是从列中的任何地方开始搜索。例如:现在像“罗宾逊”的名字,“史密森”,“桑塔格”,“罗伯逊”我的搜索找到所有的名字与“儿子”在当我开始搜索“儿子”,我宁愿它只找到桑塔格,仍然是大小写不敏感。我还需要它找到所需的名称,即使它是第二个或第三个字。例如:查找Sontag,即使在表中输入的名称为“Robertson(nee Sontag)”,但仍保留斑马条纹。““不在表中。
我的脚本代码是:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <!-- # KEEP THIS FOR THE SEARCH #### -->
<script>
// THIS SCRIPT DOES THE SEARCH ON LAST NAME ONLY
$(document).ready(function(){
var $rows = $('#myTable tr:not(:first)');
// Add stripes to odd # rows..
$('tr:nth-child(odd)').each(function() {
$(this).addClass('zebra-stripe');
});
//Search
$("#Last-Name-Input").on("keyup", function() {
var value = $(this).val().toLowerCase()
$("#myTable tr td:nth-child(1)").filter(function() {
$(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
// Re-stripe now visible row set..
$('#myTable tr:visible').each(function(e, v) {
if (e % 2 == 0) {
$(this).addClass('zebra-stripe');
} else {
$(this).removeClass('zebra-stripe');
}
});
});
});
</script>
部分CSS代码为:
<style type="text/css">
.zebra-stripe {
background-color: #E5E5E5;
}
</style>
部分HTML代码为:
<font size="3"><strong><center>Last Name Only <input id="Last-Name-Input" type="text" placeholder="Search ..."></strong> <em><FONT COLOR="red">or</font color></em> <STRONG>All <input id="myInput" type="text" placeholder="Search ..."> </center></strong></font> <!-- ***** SEARCH BOX INPUTS ***** -->
<!-- <font size="3"><strong><center>Enter All <input id="myInput" type="text" placeholder="Search ..."> Here</center></strong></font>--> <!-- **** SEARCH BOX INPUT ****-->
<div style="height:3px;font-size:3px;"> </div><!--****THIS ADJUSTS SPACING BETWEEN SEARCH BOX AND GREEN HEADING *** -->
<div style="overflow-x:auto;max-height:600px;">
<div class="div1">
<table style=" border:0px solid black;margin-left:auto;margin-right:auto; width:60%;white-space: nowrap;">
<!--<table>-->
<!--<table cellspacing="3o" border="1">-->
<colgroup width="7%"></colgroup>
<colgroup width="5%"></colgroup>
<colgroup width="4%"></colgroup>
<!-------------------------------------------------------------------->
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Section Name</th>
</tr></div>
<tbody id="myTable"> <!--***** USED FOR SEARCH TO SPECIFY WHERE THE SEARCHABLE DATA STARTS ********-->
<tr>
<td height="33" align="left" valign=top>Robinson</td>
<td align="left" valign=top>Frances</td>
<td align="center" valign=top>Tranquility TB</td>
</tr>
<tr>
<td height="33" align="left" valign=top >Smithson</td>
<td align="left" valign=top >Walter</td>
<td align="center" valign=top >Tranquility TB</td>
</tr>
<tr>
<td height="33" align="left" valign=top>Sontag</td>
<td align="left" valign=top>Arsene</td>
<td align="center" valign=top>Peace</td>
</tr>
<tr>
<td height="33" align="left" valign=top >Robertson (nee Sontag)</td>
<td align="left" valign=top >Elizabeth</td>
<td align="center" valign=top >Pioneer</td>
</tr>
我尝试了各种各样的代码片段,但都没有成功......我真的不知道在这里调整我的代码。无论我尝试什么......我的搜索根本不起作用。
1条答案
按热度按时间vaj7vani1#
1.正如我在评论中所解释的,HTML代码必须首先清理。
1.使用正则表达式来匹配姓氏的开头可能很有用。可以使用
^So
来完成此操作,其中^
表示“开头为”,So
是搜索字段中的值。要使其不区分大小写,我们使用i
修饰符来修饰“caseinsensitive"。2我为“unicode”添加了u
标志,因为我们可以使用重音符号或其他字符。这是我为解决你的问题而做的
同样的解决方案,但使用更多随机数据:https://codepen.io/patacra/pen/YzOxMdr