个人中心
gpt4 book ai didi

javascript 获取日期时间输入并根据输入过滤列表

转载 作者：行者123 更新时间：2023-12-03 00:38:02 25 4
gpt4 key购买 nike

我有一个链接到两个 JavaScript 文件的 HTML 网页。一个文件包含数据(字典列表)。另一个 javascript 文件是我放入列出表中数据的函数的地方 - 并根据输入过滤表。我通过复制和粘贴在线示例尝试了几种方法，但我对 javascript 的了解还不够深入，无法解决问题。我有两个目标需要帮助:

目标 1:如何让网站上的输入字段接受搜索变量
目标 2:如何获取该搜索变量，并让它过滤我正在显示的表格

以下是 HTML 的重要部分:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>UFO Finder</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <link rel="stylesheet" href="static/css/style.css">
</head>

<body>
  <div class="wrapper">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">UFO Sightings
            <img class="nav-ufo" src="static/images/ufo.svg">
          </a>
        </div>
      </div>
    </nav>
    <div class="hero text-center">
      <h1>UFO Sightings</h1>
      <p>The Truth is Out There</p>
    </div>
    <div class="container">
      <div class="row margin-top-50">
        <div class="col-md-2">
          <aside class="filters">
            <div class="panel panel-default">
              <div class="panel-heading">Filter Search</div>
              <div class="panel-body">
                <form>
                  <div class="form-group">
                    <ul class="list-group" id="filters">
                      <li class="filter list-group-item">
                        <label for="date">Enter a Date</label> <!-- this is where the input would come in on the page -->
                        <input class="form-control" id="datetime" type="text" placeholder="1/11/2011">
                      </li>
                    </ul>
                  </div>
                </form>
              </div>
            </div>
          </aside>
        </div>
        <div class="col-md-10">
          <div id="table-area" class="">
            <table id="ufo-table" class="table table-striped">
              <thead>
                <tr>
                  <th class="table-head">Date</th>
                  <th class="table-head">City</th>
                  <th class="table-head">State</th>
                  <th class="table-head">Country</th>
                  <th class="table-head">Shape</th>
                  <th class="table-head">Duration</th>
                  <th class="table-head">Comments</th>
                </tr>
              </thead>
              <tbody>
                <a href="filterButton">Filter Here!</a>  <!-- on click, this should trigger the filter table function-->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <span class="bottom">UFO Sightings</span>
    </footer>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
  <script src="static/js/data.js"></script>
  <script src="static/js/app.js"></script>
</body>

</html>

这里是 javascript 文件，其中包含放入文件中的函数，以及当前未正确过滤表的函数:

// from data.js
var tbody = d3.select("tbody");
var submit = d3.select("#filterButton");

// on startup - this loads the full data table into the html page
function onStart() {
  data.forEach((toBeDefined) => {
    var row = tbody.append("tr");
    Object.entries(toBeDefined).forEach(([key,value]) => {
      var cell = tbody.append("td");
      cell.text(value);
    });
  });
}
onStart();

// this is the function I want to run when you click filter 
submit.on("click", function()  {      // I know this part is probably way off
  data.sort(function(o1,o2){          // this is just the last example I tried to 
    if (sort_o1_before_o2)    return -1;  // integrate into the code and gave up on
    else if(sort_o1_after_o2) return  1;  // just left it in for "structure"
    else                      return  0;
  });
})

这里是 data.js 文件的示例，以便您可以了解数据的结构。我相信这是一个字典列表。

var data = [
  {
    datetime: "1/1/2010",
    city: "benton",
    state: "ar",
    country: "us",
    shape: "circle",
    durationMinutes: "5 mins.",
    comments: "4 bright green circles high in the sky going in circles then one bright green light at my front door."
  },
  {
    datetime: "1/1/2010",
    city: "bonita",
    state: "ca",
    country: "us",
    shape: "light",
    durationMinutes: "13 minutes",
    comments: "Three bright red lights witnessed floating stationary over San Diego New Years Day 2010"
  },
  ...
]

最佳答案

已更新这就是您想要的

// data.js
var data = [{
    datetime: "1/1/2010",
    city: "benton",
    state: "ar",
    country: "us",
    shape: "circle",
    durationMinutes: "5 mins.",
    comments: "4 bright green circles high in the sky going in circles then one bright green light at my front door."
  },
  {
    datetime: "1/1/2009",
    city: "bonita",
    state: "ca",
    country: "us",
    shape: "light",
    durationMinutes: "13 minutes",
    comments: "Three bright red lights witnessed floating stationary over San Diego New Years Day 2010"
  }];

// D3 selector
var tbody = d3.select("tbody");
var submit = d3.select("#filterButton");

// Update table with a new dataset
function updateTable(dataset) {
  tbody.html('');
  dataset.forEach((toBeDefined) => {
    var row = tbody.append("tr");
    Object.entries(toBeDefined).forEach(([key,value]) => {
      var cell = tbody.append("td");
      cell.text(value);
    });
  });
}

// Filter date function (just compare a string)
function filterByDate(dataset) {
    var filteredData = dataset.filter(function (d) {
      return d.datetime === $('#datetime').val();
    });
    return filteredData;
}

// Start here ...
// First update table of original data
updateTable(data); 
submit.on("click", function() {
  // When filter is click
  // Filter data by datetime and update the table
  var result = filterByDate(data);
  updateTable(result);
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>UFO Finder</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
  <link rel="stylesheet" href="static/css/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div class="wrapper">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">UFO Sightings
            <img class="nav-ufo" src="static/images/ufo.svg">
          </a>
        </div>
      </div>
    </nav>
    <div class="hero text-center">
      <h1>UFO Sightings</h1>
      <p>The Truth is Out There</p>
    </div>
    <div class="container">
      <div class="row margin-top-50">
        <div class="col-md-2">
          <aside class="filters">
            <div class="panel panel-default">
              <div class="panel-heading">Filter Search</div>
              <div class="panel-body">
                <form>
                  <div class="form-group">
                    <ul class="list-group" id="filters">
                      <li class="filter list-group-item">
                        <label for="date">Enter a Date</label> <!-- this is where the input would come in on the page -->
                        <input class="form-control" id="datetime" type="text" placeholder="1/11/2011">
                      </li>
                    </ul>
                  </div>
                </form>
              </div>
            </div>
          </aside>
        </div>
        <div class="col-md-10">
          <div id="table-area" class="">
            <table id="ufo-table" class="table table-striped">
              <thead>
                <tr>
                  <th class="table-head">Date</th>
                  <th class="table-head">City</th>
                  <th class="table-head">State</th>
                  <th class="table-head">Country</th>
                  <th class="table-head">Shape</th>
                  <th class="table-head">Duration</th>
                  <th class="table-head">Comments</th>
                </tr>
              </thead>
              <tbody>
                <a id="filterButton">Filter Here!</a>  <!-- on click, this should trigger the filter table function-->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <footer class="footer">
      <span class="bottom">UFO Sightings</span>
    </footer>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
  <script src="static/js/data.js"></script>
  <script src="static/js/app.js"></script>
</body>

</html>

关于javascript 获取日期时间输入并根据输入过滤列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53572986/

25 4 0
文章推荐： elasticsearch - Elasticsearch-查找每个特征的最小值和最大值
文章推荐： math - 如何计算重叠面积？
文章推荐： powershell - 为什么此代码将开关参数传递给 PowerShell 函数会失败
文章推荐： SQL Server - 架构/代码分析规则 - 您的规则将包括哪些内容？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com