Getting TD value and placing it in the array - Javascript

Question

I need to get the value of a td and place it in the array as in the following example:

	function finalizaCompra() {
    var tbl = document.getElementById("tblItens");
    var produto = [];
    if (tbl != null) {
        for (var i = 0; i < tbl.rows.length; i++) {
            for (var j = 0; j < tbl.rows[i].cells.length; j++)
                produto[j] = tbl.rows[i].cells[j];
            	console.log(produto[j]);
        }
    }
}

<table id="tblItens">
	<tr>
		<td> 1 </td>
		<td> 2 </td>
	</tr>
</table>

<img src = "http://img.freepik.com/icones-gratis/carrinho-de-compras-lado-vazio-vista_318-50806.jpg?size=338&ext=jpg" onclick="finalizaCompra()" width="100" height="100" />	

But return as undefined, you can help me?

Answer 1

You can get the elements td you wish with the querySelectorAll, go through the returned list and add to the array the value of the attribute innerHTML. Take an example:

const tds = document.querySelectorAll("#tblItens td");
const values = [];

tds.forEach(td => {
  values.push(td.innerHTML);
});

console.log(values);

<table id="tblItens">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

If you need the value as integer, just put parseInt(td.innerHTML, 10)) in the push of array.

With ES6, you can simplify the code a little by using the ellipsis to convert the NodeList returned by querySelectorAll in a array and map it, making:

const tds = document.querySelectorAll("#tblItens td");
const values = [...tds].map(td => td.innerHTML);

console.log(values);

<table id="tblItens">
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

Answer 2

Its function is almost correct, except for two problems:

1º. Take only the cell text:

Missed the textContent in produto[j] = tbl.rows[i].cells[j]; to take only the text inside the cell. The correct one would be: produto[j] = tbl.rows[i].cells[j].textContent;

2º. Invalid value in j:

console.log(produto[j]);

When you call the j after the loop for have been completed, it completes the variable j with a value greater than the size of the array, so it is returning undefined.

Your correct code would be:

function finalizaCompra() {
    var tbl = document.getElementById("tblItens");
    var produto = [];
    if (tbl != null) {
        for (var i = 0; i < tbl.rows.length; i++) {
            for (var j = 0; j < tbl.rows[i].cells.length; j++)
                produto[j] = tbl.rows[i].cells[j].textContent;
                console.log(produto); // irá retornar toda a array
        }
    }
}

function finalizaCompra() {
    var tbl = document.getElementById("tblItens");
    var produto = [];
    if (tbl != null) {
        for (var i = 0; i < tbl.rows.length; i++) {
            for (var j = 0; j < tbl.rows[i].cells.length; j++)
                produto[j] = tbl.rows[i].cells[j].textContent;
            	console.log(produto);
        }
    }
}
finalizaCompra();

<table id="tblItens">
	<tr>
		<td> 1 </td>
		<td> 2 </td>
	</tr>
</table>

Answer 3

The solution in Anderson’s answer is simpler, but follows an option using jQuery:

 var data = [];
 $('#tblItens').find("tr").each(function (i, el) {
        var row = [];
        var td = $(this).find('td');
        row.push(td.eq(0).text());
        row.push(td.eq(1).text());
        data.push(row);
});
console.log(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblItens">
	<tr>
		<td> 1 </td>
		<td> 2 </td>
	</tr>
	<tr>
		<td> 3 </td>
		<td> 4 </td>
	</tr>
</table>