如何在JS函数内添加条件判断，处理无用户输入时的表格过滤需求

解决方法 #

你只需要调整handleClick函数的逻辑，在获取输入值后增加空值判断分支即可，参考修改后的代码如下：

function handleClick() {
    // 阻止页面默认刷新行为
    d3.event.preventDefault();

    // 取输入框值时先做去空格处理，兼容用户误输入纯空格的场景
    let inputElement = d3.select("#datetime");
    let inputValue = inputElement.property("value").trim();

    console.log(inputValue);

    let filteredData;
    // 核心判断：输入为空时直接使用全量原始数据
    if (inputValue === '') {
        filteredData = tableData;
    } else {
        filteredData = tableData.filter(data => data.datetime === inputValue);
    }

    console.log(filteredData);
    buildTable(filteredData);
}

补充说明 #

• 原函数定义中的data参数可直接移除，该参数实际接收到的是点击事件对象，和你全局定义的全量数据data/tableData无关，保留反而容易造成变量冲突
• 如果不需要兼容纯空格输入的场景，可以去掉.trim()，直接判断inputElement.property("value") === ''即可

内容的提问来源于stack exchange，提问作者Jorge Daniel Atuesta