如何迭代表的td输入/tr
How to iterate td inputs/tr of a table?
我需要从表的每个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");
但是我不知道如何在colloop
中使用它如果您有任何建议或更好的方法来实现这一点,将不胜感激。
编辑:<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>
您可以使用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提琴示例
注意:这将要求您在表体行周围添加<tbody>
相关文章:
- jQuery将输入集中在下一个tr->td时,td包含一个输入字段,但从不关注html选择
- 在td JavaScript中获取隐藏的输入值
- 在 jquery 中的 TR 中查找 td 的所有输入
- jQuery选择器,用于查找包含具有特定值的TD输入的TR
- 在指定的td中查找输入字段的特定值
- 获取不带输入标记的Td-innert html-Jquery
- 根据输入字段中键入的数字更改td单元格的颜色
- 验证输入,更新<td>属性以匹配验证状态
- 获取 td 值并通过 jquery 将其打印在输入文本中
- jQuery 将类附加到输入的父 TD(如果存在 val)
- 带有输入的 td 中的 Jquery 表导航
- 如何通过jQuery将输入文本框更改为表TD
- Jquery 选择在 TD 内的输入
- jQuery从TD(HTML表格)内的输入字段中获取值
- 如何从td中删除显示的值并替换为输入字段
- 找到一个特定的td,并使用jquery将该值分配给文本输入
- 划分<td>通过输入值
- 双击时将输入文本添加到html表td中
- 迭代td内的每个输入字段
- 如何迭代表的td输入/tr