Question

我有一个链接到两个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"
  },
  ...
]

Answer 1

已更新，这就是您想要的

// 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获取日期时间输入，并根据输入内容过滤列表

1 个答案: