Question

I need to get values from td inputs from each tr of a table and 'push' them into an array

this is my approach:

function preop()
{
  var ped = [];
  var table = document.getElementById("latabla");

  for (var i = 0, row; row = table.rows[i]; i++)
  {
    var articulo="";
    var desc = "";
    var cant = 0;
    var precio = "";
    var moneda = "";
    var PrecV = "";
    var prov = 0;
    //iterate through rows
    //rows would be accessed using the "row" variable assigned in the for loop
    for (var j = 0, col; col = row.cells[j]; j++)
    {
      //iterate through columns
      //columns would be accessed using the "col" variable assigned in the for loop
      if(col[i].name.indexOf('NParte') == 0)
      {
        articulo = col[i].value;
      }
      if(col[i].name.indexOf('NDesc') == 0)
      {
        desc = col[i].value;
      }
      if(col[i].name.indexOf('NCant') == 0)
      {
        cant = col[i].value;
      }
      if(col[i].name.indexOf('Npre') == 0)
      {
        precio = col[i].value;
      }
      if(col[i].name.indexOf('Nmon') == 0)
      {
        moneda = col[i].value;
      }
      if(col[i].name.indexOf('NPV') == 0)
      {
        PrecV = col[i].value;
      }
      if(col[i].name.indexOf('NProv') == 0)
      {
        prov = col[i].value;
      }
    }//termina td
    ped.push({"Articulo":articulo,"Descripcion":desc,"Cantidad":cant,"Precio":precio,"Moneda":moneda,"Precio_Venta":PrecV,"Proveedor":prov});
  }//termina tr
  console.log(ped);
}

My error is I didn't tell the code to read inputs value of the td

Uncaught TypeError: Cannot read property 'name' of undefined

I thought about using:

var inputs = document.getElementsByTagName("input");

But I don't know how to use it inside the col loop

Any suggestions or if you have any better way to achieve this, will be appreciated.

EDIT:

<table id="latabla" class='table table-striped table-hover'>
  <thead>
    <th>Numero de Parte</th>
    <th>Descripcion</th>
    <th>Cantidad</th>
    <th>Precio</th>
    <th>Moneda</th>
    <th>Precio Venta</th>
    <th>Proveedor</th>
  </thead>
  <tr>
    <td><input type="text" value="" name="NParte" id="NParte"></td>
    <td><input type="text" value="" name="NDesc" id="NDesc"></td>
    <td><input type="number" id="NCant" name="NCant" onkeypress='return isNumberKey(event)' min="1" value="0"></td>
    <td><input type="number" value="0.00" name="Npre" id="NPre" onkeypress='return isNumberKey(event)' min="1"></td>
    <td><select id="NMon" name="Nmon"><option value="P">MXN</option><option value="D">USD</option></select></td>
    <td><input type="number" value="0.00" name="NPV" id="NPV" onkeypress='return isNumberKey(event)'></td>
    <td><input type="text" value="" id="NProv" name="Nprov" onkeypress='return isNumberKey(event)'></td>
    <td><input type="button" value="-" name="elmenos"  id="elmenos" onclick="deleteRow(this)"/></td>
  </tr>
</table>

Answer 1

You could use map/reduce along with the column headings to dynamically build this object:

// get column headers to use as object keys
var keys = Array.from(document.querySelectorAll("#latabla thead th")).map(function(cell) {
    return cell.textContent;
});

// get all input rows
var rows = Array.from(document.querySelectorAll('#latabla tbody tr'));
// convert each table row form to an object containing input values
var data = rows.map(function(row) {
    return Array.from(row.cells).reduce(function(obj, cell, index) {
        // get the value of input field inside of cell
        obj[keys[index]] = cell.querySelector('input,select').value;
        return obj;
    }, {})
});

JS Fiddle Example

Note: this would require you to add a <tbody> around your table body row(s)

How to iterate td inputs/tr of a table?

1 个答案: