动态表格td内input值获取及CSV导出失败问题求助

问题 #

我有一个动态生成的表格，尝试通过类名、ID、循环获取td内input的值并导出为CSV，但均无法成功。表格渲染正常，但CSV仅能导出表头文本，无法导出表格列的input值。

HTML代码 #

<div>
      <button id="add">Add</button>
      <button id="remove" style="margin-left: 10px">Delete</button>
    </div>
    <table id="rez" border="2px">
      <thead>
        <tr>
          <th style="width: 174px">Full Name</th>
          <th style="width: 174px">Birth Date</th>
          <th style="width: 174px">Education</th>
          <th style="width: 174px">Speciality</th>
          <th style="width: 174px">Job Title</th>
          <th style="width: 174px">Salary</th>
        </tr>
      </thead>
      <tbody id="container"></tbody>
    </table>
    <br />
    <div>
      <input type="text" id="search" /><button id="start">Search</button>
    </div>
    <br /><br />
    <div><button id="dowloand">Dowloand</button></div>
    <br />
    <table border="2px" id="tablo">
      <thead>
        <tr>
          <th style="width: 174px">Full Name</th>
          <th style="width: 174px">Birth Date</th>
          <th style="width: 174px">Education</th>
          <th style="width: 174px">Speciality</th>
          <th style="width: 174px">Job Title</th>
          <th style="width: 174px">Salary</th>
        </tr>
      </thead>
      <tbody id="cont"></tbody>
    </table>

JavaScript代码 #

<script>
      class base {
        constructor(name, birthDate, education, special, jobTitle, salary) {
          this.name = document.getElementsByClassName("names");
          this.birthDate = document.getElementsByClassName("birth");
          this.education = document.getElementsByClassName("edu");
          this.special = document.getElementsByClassName("spec");
          this.jobTitle = document.getElementsByClassName("title");
          this.salary = document.getElementsByClassName("sal");
        }
        drawAdd() {
          let tr = document.createElement("tr");
          tr.className = "tablerow";
          let container = document.getElementById("container");
          let td1 = document.createElement("td");
          let input1 = document.createElement("input");
          input1.className = "names";
          td1.appendChild(input1);
          let td2 = document.createElement("td");
          let input2 = document.createElement("input");
          input2.className = "birth";
          td2.appendChild(input2);
          let td3 = document.createElement("td");
          let input3 = document.createElement("input");
          input3.className = "edu";
          td3.appendChild(input3);
          let td4 = document.createElement("td");
          let input4 = document.createElement("input");
          input4.className = "spec";
          td4.appendChild(input4);
          let td5 = document.createElement("td");
          let input5 = document.createElement("input");
          input5.className = "title";
          td5.appendChild(input5);
          let td6 = document.createElement("td");
          let input6 = document.createElement("input");
          input6.className = "sal";
          td6.appendChild(input6);
          tr.appendChild(td1);
          tr.appendChild(td2);
          tr.appendChild(td3);
          tr.appendChild(td4);
          tr.appendChild(td5);
          tr.appendChild(td6);
          container.appendChild(tr);
        }
        removeTr() {
          let del = document.querySelectorAll(".tablerow");
          let last = del[del.length - 1];
          last.remove();
        }
 downloadCsv(csv, filename) {
          var csvFile;
          var downloadLink;
          csvFile = new Blob([csv], { type: "text/csv" });
          downloadLink = document.createElement("a");
          downloadLink.download = filename;
          downloadLink.href = window.URL.createObjectURL(csvFile);
          downloadLink.style.display = "none";
          document.body.appendChild(downloadLink);
          downloadLink.click();
        }
        exportTableToCsv(html, filename) {
          let csv = [];
          let rows = document.querySelectorAll("#rez tr");
          for (let i = 0; i < rows.length; i++) {
            let row = [],
              cols = rows[i].querySelectorAll("th,td");
            for (let j = 0; j < cols.length; j++) {
              if (j <= 5) {
                row.push(cols[j].innerText);
              } else if (j >= 6) {
                let input = cols[j].querySelectorAll(
                  ".names .birth .edu .spec .title .sal"
                );
                console.log(input.value);
              }
            }
            csv.push(row.join(","));
          }
          this.downloadCsv(csv.join("\n"), filename);
        }
      }
      let x = new base();
      document.getElementById("add").addEventListener("click", x.drawAdd);
      document.getElementById("remove").addEventListener("click", x.removeTr);
      document.getElementById("start").addEventListener("click", x.searchEnd);
      document.getElementById("dowloand").addEventListener("click", () => {
        let html = document.querySelector("#rez").outerHTML;
        x.exportTableToCsv(html, "table.csv");
      });
    </script>

解决方案 #

你的exportTableToCsv方法存在几个关键问题：

1. 列数判断逻辑错误：表格每行只有6个列（无论是表头还是数据行），j <=5已经覆盖所有列，j >=6的分支永远不会执行，导致数据行的input值根本没被处理。
2. input选择器错误：querySelectorAll(".names .birth .edu .spec .title .sal")使用空格分隔类名，代表查找后代元素，而每个td里只有一个对应类的input，应该用逗号分隔类名，并且用querySelector获取单个元素（而非querySelectorAll）。
3. 数据行取值错误：数据行的td的innerText是空的，因为内容在input里，需要判断td内是否存在input，存在则取input.value，否则取innerText。

修改后的exportTableToCsv方法如下：

exportTableToCsv(html, filename) {
  let csv = [];
  let rows = document.querySelectorAll("#rez tr");
  for (let i = 0; i < rows.length; i++) {
    let row = [];
    let cols = rows[i].querySelectorAll("th,td");
    for (let j = 0; j < cols.length; j++) {
      let cell = cols[j];
      // 检查当前单元格是否有input元素
      let input = cell.querySelector("input");
      let value = input ? input.value.trim() : cell.innerText.trim();
      // 处理CSV中的逗号问题，给包含逗号的内容加引号
      value = value.includes(",") ? `"${value}"` : value;
      row.push(value);
    }
    csv.push(row.join(","));
  }
  this.downloadCsv(csv.join("\n"), filename);
}

另外，注意你的下载按钮ID拼写错误：dowloand应该是download，建议修正避免后续问题。

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