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!
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.