如何迭代表格的td inputs/tr？

Question

我需要從表中的每個TR和「推動」他們得到TD輸入值到一個數組

這是我的方法：

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); 
} 

我的錯誤是我沒有告訴代碼閱讀TD

Uncaught TypeError: Cannot read property 'name' of undefined 

的輸入值，我想過使用：

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

但我不知道如何在col循環中使用它

任何建議或者如果你有更好的方法來實現這一點，將不勝感激。

編輯：

<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

你可以使用與列標題沿map/reduce動態地建立這個對象：

// 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

注意：這會要求你添加一個<tbody>在你的表身行（S）