JavaScript实现HTML表格两日期区间数据筛选功能出错如何解决

存在的问题 #

• ID大小写不匹配：HTML中开始日期输入框的id是From_Date，JS中获取元素时写的是from_date，导致无法正确读取开始日期
• 表格单元格读取错误：getElementsByTagName("td")返回的是当前行所有单元格的集合，不能直接读取textContent，你表格的日期列在第三列，索引为2，需要指定索引读取
• 未跳过表头行：表头行是<th>元素，没有对应的日期td，会导致解析错误
• display属性赋值错误：赋值时多写了内部分号，'table-row;'是错误写法，应该为'table-row'
• 示例表格的日期格式错误：写的2021-27-10不符合yyyy-mm-dd的规范（月的值超过了12），Date对象无法正确解析，应该改为2021-10-27这种标准格式
• HTML结构错误：存在双重<thead>嵌套、<td>标签未闭合、<tbody>位置错误的问题，会影响元素读取

修正后的代码 #

JS部分 #

function searchDate() {
  // 修正ID大小写问题
  const input_startDate = new Date(document.getElementById("From_Date").value);
  const input_stopDate = new Date(document.getElementById("To_date").value);
  // 先判断输入的日期是否合法
  if (isNaN(input_startDate.getTime()) || isNaN(input_stopDate.getTime())) {
    alert('请选择有效的起止日期');
    return;
  }

  const table = document.getElementById("table_id");
  const tr = table.getElementsByTagName("tr");

  for (let i = 0; i < tr.length; i++) {
    // 跳过表头行（第一行是表头）
    if(i === 0) continue;
    // 获取第三列的日期内容，索引为2
    const dateTd = tr[i].getElementsByTagName("td")[2];
    if (!dateTd) continue;
    const td_date = new Date(dateTd.textContent.trim());
    if (isNaN(td_date.getTime())) continue;

    if (td_date >= input_startDate && td_date <= input_stopDate) {
      // 修正display的错误赋值
      tr[i].style.display = 'table-row';
    } else {
      tr[i].style.display = 'none';
    }
  }
}

修正后的表格HTML部分 #

<table class="table table-striped border datatable" id='table_id'>
  <thead id="tablehead">
    <tr>
      <th> Region</th>
      <th> Area </th>
      <th> Date </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> US</td>
      <td> NorthAmerica</td>
      <td>2021-10-27</td>
    </tr>
    <tr>
      <td> US</td>
      <td> NorthAmerica</td>
      <td>2021-10-26</td>
    </tr>
  </tbody>
</table>

补充说明：input[type=date]的value值本身就是标准yyyy-mm-dd格式，浏览器显示的mm/dd/yyyy是给用户看的展示格式，实际读取到的value和API返回的日期格式完全一致，不需要额外做格式转换。

内容的提问来源于stack exchange，提问作者imran_44