如何获取表格中所有自动填充的值> tbody> tr> td ... ??
element.children[0].firstElementChild.value
以上语句返回null
element.children[1].firstElementChild.value
上面的语句是返回tr的第二个单元格内的下拉列表的值。
element.children[2].firstElementChild.value
<script>
function summariseTable(tableId) {
var tbody = document.getElementById(tableId).lastElementChild,
reduced = Array.prototype.map.call(tbody.getElementsByTagName('tr'), function (element) {
return {
code: element.children[1].firstElementChild.value,
SqIn: +(element.children[6].firstElementChild.value)
};
}).reduce(function (acc, rowData) {
if (!acc.hasOwnProperty(rowData.code)) {
acc[rowData.code] = rowData.SqIn;
// console.log(code);
} else {
acc[rowData.code] += rowData.SqIn;
// console.log(rowData.SqIn);
}
return acc;
}, {});
//emptyNode(tbody);
//console.log(reduced);
var tbody = document.getElementById('summary')
Object.keys(reduced).forEach(function (code) {
var row = document.createElement('tr'),
tdCode = document.createElement('td'),
//tdRTFM = document.createElement('td'),
tdSqIn = document.createElement('td');
tdCode.appendChild(document.createTextNode(code));
tdSqIn.appendChild(document.createTextNode(reduced[code]));
row.appendChild(tdCode);
//row.appendChild(tdRTFM);
row.appendChild(tdSqIn);
tbody.appendChild(row);
});
}
document.getElementById('summarise').addEventListener('click', function () {
summariseTable('tblOne');
}, false);
</script>
HTML:结构粗糙..
<table id="tblOne">
<thead>
<tr>
<th>Codes</th>
<th>SqIn</th>
</tr>
</thead>
<tbody>
<tr>
<td><input style="width:90px" class="codeRule" id="code_0' + id + '" name="code_0' + id + '"/></td>
<td><input type="text" id="sqin_0" name="sqin_0" value="25"/></td>
</tr>
<tr>
<td><input style="width:90px" class="codeRule" id="code_1' + id + '" name="code_1' + id + '"/></td>
<td><input type="text" id="sqin_1" name="sqin_1" value="25"/></td>
</tr>
<tr>
<td><input style="width:90px" class="codeRule" id="code_2' + id + '" name="code_2' + id + '"/></td>
<td><input type="text" id="sqin_2" name="sqin_2" value="25"/></td>
</tr>
<tr>
<td><input style="width:90px" class="codeRule" id="code_3' + id + '" name="code_3' + id + '"/></td>
<td><input type="text" id="sqin_3" name="sqin_3" value="25"/></td>
</tr>
<tr>
<td><input style="width:90px" class="codeRule" id="code_4' + id + '" name="code_4' + id + '"/></td>
<td><input type="text" id="sqin_4" name="sqin_4" value="25"/></td>
</tr>
<tr>
<td><input style="width:90px" class="codeRule" id="code_5' + id + '" name="code_5' + id + '"/></td>
<td><input type="text" id="sqin_5" name="sqin_5" value="25"/></td>
</tr>
</tbody>
</table>
<button id="summarise">Summarise</button>
输出结束:
<table class="table grey-table" id="summary">
<thead>
<tr>
<th>Code</th>
<th>Slab Sq In</th>
<th>Project Sq In</th>
<th>No. Slabs</th>
<th>Unit Price</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>