How to get this HTML table's text box value using JS?

Question

I've tried different approaches, but I'm missing something crucial:

Here's a Fiddle version

function saveData() {
  var table = document.getElementById("dtable");

  var [, ...tr] = table.querySelectorAll("tr");
  var tableData = [...tr].map(r => {
    var td = r.querySelectorAll("td");
    return [...td].map((c, j) => j < 6 ? c.innerHTML : j == 6 ? c.querySelectorAll("select")[0].value : j == 7 ? c.querySelectorAll('comments')[0].value);
  })
  tableData = tableData.filter(e => e[6] != 'empty');

}

Note for column counting purpose: The first column of the table is hidden.

This is the column whose data is to be grabbed:

<td><input type="text" name="comments" style="width:99%;"></td>

Appreciate your help!

Answer 1

Here is the solution, which was given by a good soul on Fiddle:

function saveData() {
  var table = document.getElementById("dtable");

  var [, ...tr] = table.querySelectorAll("tr");
  var tableData = [...tr].map(r => {
    var td = r.querySelectorAll("td");
    return [...td].map((c, j) => j < 6 ? c.innerHTML : j == 6 ? c.querySelectorAll("select")[0].value : j == 7 ? c.querySelectorAll('input[name="comments"]')[0].value : '')})
  tableData = tableData.filter(e => e[6] != 'empty');
}

and this is what's changed:

From:

c.querySelectorAll('comments')[0].value

To

c.querySelectorAll('input[name="comments"]')[0].value

Not sure why he/she wouldn't post the answer himself/herself.