Question

我有3个搜索输入，一个用于SN，一个用于TITLE，一个用于DATE，我用它们来完成完美和谐。

Buuuuut，现在情况并非如此......个别他们工作得很好但是在SN输入中按 25 显示 allan和joy's 行，按NAME输入中的 o 足以取消第一个过滤器，而不是只显示欢乐，因为她是唯一一个 25 的人SN并且名称中包含 o ， scot 也是如此......这一切都在继续。

我怎么能解决这个问题？伙计们？

jsfiddle

胖乎乎的JS

$(document).ready(function() {
  $('#sn').keyup(function() {
    var searchTerm = $(this).val().replace(/ /g, '').toLowerCase();
    $(".sn").each(function() {
      if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm)) {
        $(this).parent().show();
      } else {
        $(this).parent().hide();
      }
    });
  });
  $('#title').keyup(function() {
    var searchTerm2 = $(this).val().replace(/ /g, '').toLowerCase();
    $(".title").each(function() {
      if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm2)) {
        $(this).parent().show();
      } else {
        $(this).parent().hide();
      }
    });
  });
  $('#date').keyup(function() {
    var searchTerm3 = $(this).val().replace(/ /g, '').toLowerCase();
    $(".date").each(function() {
      if ($(this).text().replace(/ /g, '').toLowerCase().match(searchTerm3)) {
        $(this).parent().show();
      } else {
        $(this).parent().hide();
      }
    });
  });
});

Answer 1

因此，您需要根据所有过滤输入过滤行，您只需根据当前输入的过滤进行过滤。

我制作了一个过滤器功能，它会检查所有可能的过滤器并对所有过滤器进行过滤。如果没有意义，请检查注释以及if语句的解释。

PS。您的小提琴中的欢乐HTML也被搞砸了。（没有sn列，joy没有class属性）

＆＃13;

	$(document).ready(function() {
	  $('#sn').keyup(function() {
	    filter();
	  });
	  $('#title').keyup(function() {
	    filter();
	  });
	  $('#date').keyup(function() {
	    filter();
	  });
    
    function filter() {
    	var sn = $("#sn").val().replace(/ /g, '').toLowerCase();
    	var title = $("#title").val().replace(/ /g, '').toLowerCase();
    	var date = $("#date").val().replace(/ /g, '').toLowerCase();
    
    	$("tr.fill").each(function() {
      	var showRow = true;
        // if there is a value for filtering sn AND this row's does NOT have a match, hide row
        if (sn && !($(this).find('.sn').text().replace(/ /g, '').toLowerCase().match(sn))) {
        	showRow = false;
        }
        // if row is not already meant to be hidden AND there is a value for filtering title AND this row's does NOT have a match, hide row
        if (showRow && title && !($(this).find('.title').text().replace(/ /g, '').toLowerCase().match(title))) {
        	showRow = false;
        }
        // if row is not already meant to be hidden AND there is a value for filtering date AND this row's does NOT have a match, hide row
        if (showRow && date && !($(this).find('.date').text().replace(/ /g, '').toLowerCase().match(date))) {
        	showRow = false;
        }
        
        if (showRow) {
        	$(this).show();
        } else {
        	$(this).hide();
        }
      });
    }
	});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr class="header">
    <td>SN.</td>
    <td>Title</td>
    <td>Date</td>
  </tr>

  <tr>
    <td>
      <input id="sn" type="text" placeholder="Search by SN" />
    </td>
    <td>
      <input id="title" type="text" placeholder="Search by Title" />
    </td>
    <td>
      <input id="date" type="text" placeholder="Search by Date" />
    </td>
  </tr>

  <tr class="fill">
    <td class="sn">RD 254691</td>
    <td class="title">allan</td>
    <td class="ate">29.10.2016</td>
  </tr>

  <tr class="fill">
<td class="sn">RB 252611</td>
<td class="title">joy</td>
    <td class="ate">29.10.2016</td>
  </tr>

  <tr class="fill">
    <td class="sn">RD 354792</td>
    <td class="title">daisy</td>
    <td class="date">29.10.2016</td>
  </tr>

  <tr class="fill">
    <td class="sn">RD 54692</td>
    <td class="title">scot</td>
    <td class="date">29.10.2016</td>
  </tr>
</table>

＆＃13;

使3个搜索输入字段一起工作

1 个答案: