jQuery多词列搜索

Question

I've found this little code and it works like a charm! 我找到了这个小代码，它就像一个魅力！ demo: https://jsfiddle.net/gdv06jsu/4/ 演示： https : //jsfiddle.net/gdv06jsu/4/

I put it into my project and now there is a problem. 我将其放入项目中，现在出现了问题。 everytime I made an input, the whole table disappears, after the <th> tag. 每次输入时，在<th>标记之后，整个表都会消失。

First it worked well, I've placed search inputs for all columns, and than there was the problem. 首先，它运行良好，我为所有列放置了搜索输入，然后出现了问题。 Now it didn't work with just 1 input?! 现在只用1个输入就不行吗？

Anyone an idea? 有人知道吗？

Here ist my code: 这是我的代码：

   <?php
    include("dbconnect.php");
   ?>

    <html>
    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Abfrage</title>
    <script src="js-css/jquery-2.1.0.js"></script>
      <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

      <link href="js-css/form-problem-melden.css" rel="stylesheet">





    <script type="text/javascript">
    $(window).ready(function(){

    var $filterableRows = $('#MI6').find('tr').not(':first'),
    $inputs = $('.search-key');

    $inputs.on('input', function() {

        $filterableRows.hide().filter(function() {
        return $(this).find('td').filter(function() {

          var tdText = $(this).text().toLowerCase(),
                inputValue = $('#' + $(this).data('input')).val().toLowerCase();

            return tdText.indexOf(inputValue) != -1;

        }).length == $(this).find('td').length;
      }).show();

    });

    });
    </script>

    </head>
    <body>
      <input type="text" id="problem" class="search-key" placeholder="Problem Livesuchee">
      <table id="MI6">
          <tr>
              <th>Problem</th>
              <th style="width:250px;">Meldender</th>
              <th style="width:120px;">Prio</th>
              <th style="width:102px;">Status</th>
              <th>..</th>
          </tr>


          <?php
          $ergebnis = mysqli_query($db, "SELECT * FROM wt_ticket");
          while($row = mysqli_fetch_object($ergebnis))
          {


            $akt_zeit = time();
            $offen1 = $akt_zeit - $row->timestamp;
    $offen_tage = $offen1 / 60 / 60 / 24;
    $offen_stunden = $offen1 / 60 / 60;
    $offen_minuten = $offen1 / 60;

    if($offen_tage < 1 && $offen_minuten > 60 ){
      $offen = floor($offen_stunden) . " Stunden";
    }

    if($offen_tage < 1 && $offen_stunden < 1 ){
      $offen = floor($offen_minuten) . " Minuten";
    }

    if($offen_tage >= 1){
      $offen = floor($offen_tage) . " Tage";
    }

    if($offen_tage < 1 && $offen_stunden < 1 && $offen_minuten < 1){
      $offen = $offen1 . " Sekunden";
    }

      $id = $row->id;

   ?>

  <tr>
      <td data-input="problem"><?php echo $row->problem_titel; ?> - <?php echo $row->problem; ?> - <?php echo $row->problem_spez; ?></td>
      <td><? echo $row->email; ?></td>
      <td><? echo $row->prio; ?></td>
      <td><? echo $row->erledigt_prozent; ?>
      <td>
        <a href="ticket_edit.php?id=<? echo $id; ?>" id="edit">bearbeiten <span></span><i class="fas fa-edit"></i></a>
        <a href="ticket_del.php?id=<? echo $id; ?>" id="del">löschen <span></span><i class="fas fa-trash"></i></a>
      </td>
  </tr>

  <?php
    }
  ?>

    </table>

    </body>
    </html>

Answer 1

As per the fiddle, every td contains the attribute data-input for fetching the inner text of the tag like <td data-input="name">James</td> . 按照小提琴，每个td包含属性data-input用于获取标记的内部文本，例如<td data-input="name">James</td> 。 So, you've to specify it as the same will be used in your code also $(this).data('input') 因此，您必须指定它，因为在代码中也将使用相同的内容$(this).data('input')
I hope, it will help you :) 希望对您有帮助：)

Answer 2

Here is another way you can search in table. 这是您可以在表格中搜索的另一种方法。 Hope it helps. 希望能帮助到你。

 $(".search-key").on("keyup", function() { var value = $(this).val().toLowerCase(); $("table tr").each(function(index) { if (index !== 0) { $row = $(this); var flag = 0; $row.find("td").each(function(index) { var id = $(this).text().toLowerCase(); if (id.indexOf(value) === 0) { flag = 1; } }); if (flag == 0) { $row.hide(); } else { $row.show(); } } }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="problem" class="search-key" placeholder="Problem Livesuchee"> <table id="MI6"> <tr> <th>Problem</th> <th style="width:250px;">Meldender</th> <th style="width:120px;">Prio</th> <th style="width:102px;">Status</th> <th>..</th> </tr> <tr> <td data-input="problem">James</td> <td>Bond</td> <td>6</td> <td>test <td>test</td> </tr> <tr> <td data-input="problem">Rene</td> <td>Mathis</td> <td>5</td> <td>test <td>test</td> </tr> <tr> <td data-input="problem">James</td> <td>Bond</td> <td>7</td> <td>test <td>test</td> </tr> </table>

Answer 3

The problem is solved! 问题已经解决了！

You need to put an input in every th 你需要把input的每一个th
and a data-input in every td , otherwise the script won't work! 并在每个td data-input ，否则脚本将无法工作！

Thank you for your help! 谢谢您的帮助！

jQuery多词列搜索

问题描述

3 个解决方案

解决方案1
1 已采纳 2018-04-07 05:22:22

解决方案2
0 2018-04-07 06:39:54

解决方案3
0 2018-04-08 17:47:23

jQuery多词列搜索

问题描述

3 个解决方案

解决方案1 1 已采纳 2018-04-07 05:22:22

解决方案2 0 2018-04-07 06:39:54

解决方案3 0 2018-04-08 17:47:23

解决方案1
1 已采纳 2018-04-07 05:22:22

解决方案2
0 2018-04-07 06:39:54

解决方案3
0 2018-04-08 17:47:23