javascript - 如何使用用户输入作为参数在 JS 函数内部创建条件语句?
问题描述
我正在尝试建立一个有表格的网页。如果用户想要过滤任何特定日期,他们可以与表格进行交互。这是我到目前为止得到的代码:
enter code here// from data.js
var tableData = data;
// Step 1: verify the data by printing the data on the console
console.log("Here is the data inputed:", tableData);
//Step 2: Using D3 select the tag "body" from html doc
const tbody = d3.select("tbody");
// Step 3: Create a function that will build the table
function buildTable(data) {
// Step 3.1: Replaces the HTML with a space.
tbody.html("");
// Step 3.2: Create a checkpoint on the console
console.log("Your table was cleared");
// Step 3.3: Create foreach loop using arrow to paste values inside of the table
data.forEach((element) => {
var row = tbody.append("tr");
Object.entries(element).forEach(([key, value]) => {
var cell = row.append("td");
cell.text(value);
});
});
// Step 3.4: Console log message stating table has been built check for errors inside console log.
console.log("Your table has been built. Double-check the console to inspect for errors highlighted in red");
}
我创建了这个函数来处理点击:
function handleClick(data) {
// Step 5.1: Prevent the page from refreshing
d3.event.preventDefault();
// Step 5.1 : Grab the value from the date time search option. The id acording
// to the html file is #datetime.
let inputElement = d3.select("#datetime");
let inputValue = inputElement.property("value");
// Consol log the input value to double check.
console.log(inputValue);
// Create filter data according to user input value
var filteredData = tableData.filter(data => data.datetime === inputValue);
// Console log the input value to double check.
console.log(filteredData);
// Use builTable to create table
buildTable(filteredData);
我需要在我的 handleClick 函数中创建一个条件,这样当用户在没有输入的情况下单击按钮时,页面只会加载带有数据参数 buildTable(data) 的 buildTable 函数;我已经尝试了很多东西,但仍然没有t 能够完成它。有任何想法吗?
这是我在函数之外的代码的最后一部分:
d3.select("#filter-btn").on("click", handleClick);
// 1. function to filter data Inside of function affter filter add to filter function
// Have a trigger for the function to run ON.CLICK (Will trigger the function to run)
//Last step: Make the function buildTable run again with original data.
buildTable(data);
非常感谢您阅读我的帖子并帮助我!
解决方案
您可以添加一个条件来检查用户是否选择了任何日期。如果是,则过滤表格,否则渲染整个表格。希望这是你想要的。
尝试以下操作(注意标有 的注释<-------
):
function handleClick(data) {
// Step 5.1: Prevent the page from refreshing
d3.event.preventDefault();
// Step 5.1 : Grab the value from the date time search option. The id acording
// to the html file is #datetime.
let inputElement = d3.select("#datetime");
let inputValue = inputElement.property("value");
if(inputValue){ // <------- try adding this condition
// Consol log the input value to double check.
console.log(inputValue);
// Create filter data according to user input value
var filteredData = tableData.filter(data => data.datetime === inputValue);
// Console log the input value to double check.
console.log(filteredData);
// Use builTable to create table
buildTable(filteredData);
}
else{
buildTable(tableData); // <------- Here render the default table
}
}
推荐阅读
- facebook - Facebook Graph API - 创建测试页面时发出cover_photo
- rest - 身份验证错误:每次将项目添加到 SharePoint 列表时,使用 Microsoft Flow 中的 Microsoft Graph 计划程序 API 创建计划
- go - 如何在另一个模块中使用“GOPATH”之外的模块?
- c# - 为 MS-Word 随机生成数字输入
- apache - 如何使用 www 将非 www 和 http 重定向到 https?
- java - 当我运行我的程序时,我在线程“main”java.lang.NoClassDefFoundError 中收到这种类型的错误异常
- java - Thymelaf - 两个如果在一个 div 中
- java - JTextField 只接受来自我的按钮的一位数字
- powershell - Powershell 禁止证书通知
- android - Activity 泄露了最初在 socialAuth 中添加的窗口