如何使用用户输入作为参数在 JS 中的 function 内创建条件语句？

Question

我正在尝试构建一个 web 页面，其中有一张桌子。 如果用户想要过滤任何特定日期，他们可以与表格进行交互。 这是我到目前为止得到的代码：

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 来处理点击：

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 function 内部创建一个条件，这样当用户在没有输入的情况下单击按钮时，页面将只加载带有数据参数buildTable（数据）的buildTable function；我已经尝试了很多东西，但仍然不是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);

非常感谢您阅读我的帖子并帮助我！

Answer 1

您可以添加一个条件来检查用户是否选择了任何日期。 如果是，则过滤表格，否则渲染整个表格。 希望这是你想要的。

尝试以下操作（注意标有<-------的评论）：

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