在表格中获取自动完成值

时间:2014-03-10 15:27:58

标签: javascript html

如何获取表格中所有自动填充的值> 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>

0 个答案:

没有答案