Javascript中getAttribute()返回null求助：按钮点击对应显示CSV

问题根源 #

你遇到的getAttribute()返回null的核心原因是：从cotton.html跳转到reports.html后，新页面的DOM中不存在原页面的按钮元素，自然无法获取其ID。要实现点击不同按钮加载对应CSV，必须先把按钮ID传递到reports.html页面。

解决方案步骤 #

1. 在cotton.html中传递按钮ID到目标页面 #

有两种简单的实现方式：

方式一：直接修改a标签的URL（静态方式）

把包裹按钮的a标签href改为带ID参数的格式：

<!-- cotton.html -->
<a href="reports.html?id=1"><button id="1">报表1</button></a>
<a href="reports.html?id=2"><button id="2">报表2</button></a>
<!-- ... 其他48个按钮以此类推 -->

方式二：用JS动态处理点击（适合批量按钮）

如果按钮数量多，可以用JS批量绑定点击事件，自动传递ID：

<!-- cotton.html -->
<button id="1">报表1</button>
<button id="2">报表2</button>
<!-- ... 其他按钮 -->

<script>
// 给所有按钮绑定点击事件
document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', function() {
    const btnId = this.id;
    // 跳转到reports.html并携带ID参数
    window.location.href = `reports.html?id=${btnId}`;
  });
});
</script>

2. 在reports.html中获取ID并加载对应CSV #

用URLSearchParams获取传递的ID，再结合Papa.parse加载对应CSV文件：

<!-- reports.html -->
<div id="csv-container"></div>

<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
<script>
// 从URL中获取ID参数
function getReportId() {
  const params = new URLSearchParams(window.location.search);
  return params.get('id');
}

const reportId = getReportId();
const csvContainer = document.getElementById('csv-container');

if (reportId) {
  // 假设你的CSV文件命名为 report1.csv、report2.csv... 请根据实际路径调整
  const csvPath = `./reports/report${reportId}.csv`;
  
  // 使用Papa.parse解析CSV
  Papa.parse(csvPath, {
    download: true,
    header: true, // 若CSV有表头则设为true，否则设为false
    complete: function(results) {
      // 渲染CSV数据到页面（示例：生成表格）
      if (results.data.length === 0) {
        csvContainer.innerHTML = '<p>该报表暂无数据</p>';
        return;
      }
      
      const table = document.createElement('table');
      // 添加表头
      const headerRow = document.createElement('tr');
      Object.keys(results.data[0]).forEach(key => {
        const th = document.createElement('th');
        th.textContent = key;
        headerRow.appendChild(th);
      });
      table.appendChild(headerRow);
      
      // 添加数据行
      results.data.forEach(row => {
        const dataRow = document.createElement('tr');
        Object.values(row).forEach(value => {
          const td = document.createElement('td');
          td.textContent = value;
          dataRow.appendChild(td);
        });
        table.appendChild(dataRow);
      });
      
      csvContainer.appendChild(table);
    },
    error: function(error) {
      csvContainer.innerHTML = `<p>加载报表失败：${error.message}</p>`;
    }
  });
} else {
  csvContainer.innerHTML = '<p>请选择要查看的报表</p>';
}
</script>

注意事项 #

• 确保CSV文件的命名规则和代码中csvPath的拼接逻辑一致（比如ID为1对应report1.csv）
• 如果CSV文件不在同一目录下，要调整csvPath的路径为实际位置
• 若按钮ID不是纯数字，只需调整CSV文件名的拼接规则即可

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