Getting TD value and putting it in the array - JavaScript

1

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 returns as undefined, can you help me?

    
asked by anonymous 01.11.2017 / 12:28

3 answers

5

You can get the td elements you want with querySelectorAll , scroll through the returned list, and add the value of the innerHTML attribute to the array . Here's 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 an integer, just put parseInt(td.innerHTML, 10)) in push of array .

With ES6, you can simplify the code a bit by using the ellipsis to convert the NodeList returned by querySelectorAll to an array and map it by doing:

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>
    
01.11.2017 / 12:38
2

Its function is almost correct except for two problems:

1st. Catch only cell text:

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

2nd. Invalid value in j :

console.log(produto[j]);

When you call j after loop for has completed, it ends the variable j with a value that is more 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>
    
01.11.2017 / 12:50
0

The solution in Anderson's answer is simpler, but it 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><tableid="tblItens">
	<tr>
		<td> 1 </td>
		<td> 2 </td>
	</tr>
	<tr>
		<td> 3 </td>
		<td> 4 </td>
	</tr>
</table>
    
01.11.2017 / 12:40