Javascript Jquery在表上进行多次搜索
我有一个表，并希望有一种方法，您可以搜索多行在同一时间 e、 g.将某物放入盒子编号以及欺骗中 这是我的HTMLJavascript Jquery在表上进行多次搜索,javascript,jquery,Javascript,Jquery,我有一个表，并希望有一种方法，您可以搜索多行在同一时间 e、 g.将某物放入盒子编号以及欺骗中 这是我的HTML <table id="main-table"> <tbody> <tr class="inputs open"> <th><input type="text" name="box_number"></th> <th><input type="text" n
<table id="main-table">
<tbody>
<tr class="inputs open">
<th><input type="text" name="box_number"></th>
<th><input type="text" name="make"></th>
<th><input type="text" name="qty"></th>
<th><input type="text" name="deception"></th>
</tr>
<tr>
<td>N57</td>
<td>N/a</td>
<td>8</td>
<td>test</td>
</tr>
<tr>
<td>N23</td>
<td>N/a</td>
<td>8d</td>
<td>test2</td>
</tr>
</tbody>
N57
不适用
8.
测试
N23
不适用
8d
测试2
$(document).on('change keyup click touchstart', ".inputs input", function (event) {
var inputs = $(".inputs input");
$.each(inputs, function() {
//Get the index
var inputIndex = $(this).closest('th').index();
//Getting the input val
var inputVal = $(this).val().toLowerCase();
//Getting all tr other then add new
var $trList = $(this).parent().parent().siblings().not(".add_new_item");
//Each tr list
$.each($trList, function() {
//Getting each td from the td
var $td = $($trList).children().eq(inputIndex);
if (($td.text().toLowerCase().indexOf(inputVal) > -1) || inputVal.length < 1) { //Check if the search term is in the td text
//$(this).removeClass("hide");
} else {
if ($(this).hasClass('first-item')) {
} else {
$(this).addClass("hide");
}
}
});
});
});
$（文档）。在（'change keyup click touchstart'，“.inputs input”，函数（事件）上{
变量输入=$（“.inputs输入”）；
$.each（输入，函数（）{
//获取索引
var inputIndex=$（this.closest（'th'）.index（）；
//获取输入值
var inputVal=$（this.val（）.toLowerCase（）；
//获取所有tr，然后添加新的
var$trList=$（this.parent（）.parent（）.sibbines（）.not（“.add\u new\u item”）；
//每个tr列表
$.each（$trList，function（）{
//从td获取每个td
var$td=$（$trList.children（）.eq（inputIndex）；
if（$td.text（）.toLowerCase（）.indexOf（inputVal）>-1）| | inputVal.length<1）{//检查搜索词是否在td文本中
//$（this.removeClass（“隐藏”）；
}否则{
if（$（this）.hasClass（'first-item'））{
}否则{
$（this.addClass（“hide”）；
}
}
});
});
});
感谢您的帮助。您可以使用单个文本框，而不是使用多个文本框，并在表td标记中检查其值
<html>
<body>
<table id="main-table">
<input type="text" id="box_number">
<tbody>
<tr>
<td>N57</td>
<td>N/a</td>
<td>8</td>
<td>test</td>
</tr>
<tr>
<td>N23</td>
<td>N/a</td>
<td>8d</td>
<td>test2</td>
</tr>
</tbody>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
$(document).on('change keyup click touchstart', "#box_number", function (event) {
var input = $("#box_number").val();
$("tr").each(function(i){
$(this).hide();
});
$("tr").find("td").each(function(data){
var v = $(this);
if(v.text().includes(input))
v.closest("tr").show();
});
});
</script>
</body>
</html>
N57
不适用
8.
测试
N23
不适用
8d
测试2
$（文档）。在（'change keyup click touchstart'、“#box_number”、函数（事件）上{
var输入=$（“#框号”）.val（）；
$（“tr”）。每个（功能（i）{
$（this.hide（）；
});
$（“tr”）。查找（“td”）。每个函数（数据）{
var v=$（本）；
如果（v.text（）.包括（输入））
v、 最近的（“tr”）.show（）；
});
});
<html>
<body>
<table id="main-table">
<input type="text" id="box_number">
<tbody>
<tr>
<td>N57</td>
<td>N/a</td>
<td>8</td>
<td>test</td>
</tr>
<tr>
<td>N23</td>
<td>N/a</td>
<td>8d</td>
<td>test2</td>
</tr>
</tbody>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
$(document).on('change keyup click touchstart', "#box_number", function (event) {
var input = $("#box_number").val();
$("tr").each(function(i){
$(this).hide();
});
$("tr").find("td").each(function(data){
var v = $(this);
if(v.text().includes(input))
v.closest("tr").show();
});
});
</script>
</body>
</html>
N57
不适用
8.
测试
N23
不适用
8d
测试2
$（文档）。在（'change keyup click touchstart'、“#box_number”、函数（事件）上{
var输入=$（“#框号”）.val（）；
$（“tr”）。每个（功能（i）{
$（this.hide（）；
});
$（“tr”）。查找（“td”）。每个函数（数据）{
var v=$（本）；
如果（v.text（）.包括（输入））
v、 最近的（“tr”）.show（）；
});
});