Question

搜索堆栈溢出我能够实时过滤行，但我需要更具体。现在我使用这段代码：

HTML：

$(document).ready(function(){
    var $rows = $('#catalogo tbody tr');
    $rows.splice(0,1);
    $('#search').keyup(function() {
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' ');

      $rows.hide().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        var matchesSearch = true;
        $(val).each(function(index, value) {
          matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);
        });
        return matchesSearch;
      }).show();
});
});

脚本：

<?php

$file = "/tmp/myclient.sock";
unlink($file);

$socket = socket_create(AF_UNIX, SOCK_DGRAM, 0);

if (socket_bind($socket, $file) === false) {
  echo "bind failed";
}

socket_sendto($socket, "Hello world!", 12, 0, "/tmp/myserver.sock", 0);
echo "sent\n";

if (socket_recvfrom($socket, $buf, 64 * 1024, 0, $source) === false) {
  echo "recv_from failed";
}
echo "received: [" . $buf . "]   from: [" . $source . "]\n";

?>

基于此的脚本：How to perform a real time search and filter on a HTML table

我想要做的是能够有4个不同的输入，每个输入过滤每行的第一，第二，第三和第四个单元格（能够按标题，作者，年份和最高价格进行过滤）。我怎么能这个呢？

Answer 1

感谢blackandorangecat的链接，我设法把东西放在一起。

HTML：

<label class = "text">Título:<input type="text" id="stitulo" onkeyup="filter(this, 0)" style="margin: 0 auto;"/></label>
<label class = "text">Autor:<input type="text" id="sautor" onkeyup="filter(this, 1)" style="margin: 0 auto;"/></label>
<label class = "text">Año:<input type="text" id="sano" onkeyup="filter(this, 3)" size="1" style="margin: 0 auto;"/></label>
<label class = "text">Precio máximo:<input type="text" id="sprecio" onkeyup="filterNum(this, 4)" size="1" style="margin: 0 auto;"/></label>

JavaScript的：

function filter(x, y) {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = x;
  filter = input.value.toUpperCase();
  table = document.getElementById("catalogo");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[y];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

function filterNum(x, y) {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = x;
  if(input.value === "") {
      filter = 0.;
  } 
  else filter = parseFloat(input.value);
  table = document.getElementById("catalogo");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[y];
    if (td) {
      if ((filter >= parseFloat(td.innerHTML)) || filter === 0) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

希望这对其他人也有帮助。

我需要实时过滤表格单元格（在html jQuery中）

1 个答案: