Question

我发现了这个小代码，它就像一个魅力！演示：https://jsfiddle.net/gdv06jsu/4/

我把它放到我的项目中，现在有一个问题。每当我做出输入时，整个表就会消失 <th>代码。

首先它运作良好，我已经为所有列放置了搜索输入，而不是有问题。现在它只用了1个输入就没了？！

有人有想法吗？

这是我的代码：

   <?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

根据小提琴，每个td包含用于获取标记内部文本的属性data-input，如<td data-input="name">James</td>。因此，您必须指定它，因为代码中也会使用相同的$(this).data('input') 我希望，它会对你有所帮助:)。

Answer 2

这是您可以在表格中搜索的另一种方式。希望它有所帮助。

＆＃13;

$(".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();
            }
        }
    });
});

＆＃13;

<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>

＆＃13;

Answer 3

问题解决了！

您需要在input每个th和data-input中添加td，否则脚本将无效！

感谢您的帮助！

jquery多项列搜索

3 个答案: