HTML表格上的多个搜索过滤器

时间:2019-03-25 13:50:40

标签: javascript html search filter html-table

我想知道你是否能够提供帮助。

我有一个HTML表和一个文本字段。页面加载时的JavaScript会在文本字段中获取值并过滤表格。

我想添加第二个文本字段,并使用该文本字段根据文本字段中的值进一步过滤表格。

我添加了一个新的文本字段并为其分配了一个值。我添加了相同的脚本(我认为这是我的问题所在),并进行了修改以查看新领域。现在看起来好像只在使用第二个脚本。

我如何才能同时使用和过滤表格?有什么想法吗?

HTML

 <input type="hidden" id="myInput" value="3"/>
<input type="hidden" id="myInput1" value="Time"/>

JAVASCRIPT

$(document).ready(function() {
                console.log("ready");
  var input, filter, table, tr, td, i, searchFilter;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("job_table");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3];
    if (td) {
        txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }      
  }
});

    $(document).ready(function() {
                console.log("ready");
  var input, filter, table, tr, td, i, searchFilter;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("job_table");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3];
    if (td) {
        txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }      
  }
});

1 个答案:

答案 0 :(得分:0)

if(isset($_POST['edit'])) {
    foreach ($_POST['edit_ativity'] as $key=>$value) {
        $dist_activity_id = $_POST['edit_ativity'][$key];
        $dist_activity_duration = $_POST['edit_duration'][$key];
        $dist_id = $_POST['distance_id'][$key];
        $dist_date = $_POST['edit_datepicker'][$key];                   
        $stmt = $conn->prepare("UPDATE distance SET dist_activity_id=$dist_activity_id, dist_activity_duration=$dist_activity_duration, dist_date='$dist_date' WHERE id=$dist_id");
        $stmt->execute();
    }

    $stmt->close();
    mysqli_close($conn);
}