Question

我有一个表1，它现在有一些以下数据，最多可达50-100行。我想在汇总按钮单击中汇总其中的信息，并希望在另一个表格中显示该信息，该表格将根据汇总信息动态创建。但我不知道该怎么做。

enter image description here

我只是想要，如果代码存在多于输出表中的所有Sq-In应该加起来。如上表所示，A1重复三次，所以它的所有SqIn都加起来，得到A1 81。现在代码文本框的id是＃code_0，＃code_1，＃code_2等等。 SqIn的位置是＃sqin_0，＃sqin_1，＃sqin_2等......

<table id="myTable">
    <thead>
        <tr>
            <th>Codes</th>
            <th>room</th>
            <th>SqIn</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" value="A1" /></td>    
            <td><input type="text" value="1" /></td>
            <td><input type="text" value="25"/></td>
        </tr>
        <tr>            
            <td><input type="text" value="B1" /></td>
            <td><input type="text" value="1"/></td>
            <td><input type="text" value="25"/></td>
        </tr>
        <tr>
            <td><input type="text" value="C1" /></td>
            <td><input type="text" value="1"/></td>
            <td><input type="text" value="25"/></td>

        </tr>
        <tr>
            <td><input type="text" value="A1" /></td>
            <td><input type="text" value="2"/></td>
            <td><input type="text" value="25"/></td>

        </tr>
        <tr>
            <td><input type="text" value="B1" /></td>
            <td><input type="text" value="1"/></td>
            <td><input type="text" value="25"/></td>

        </tr>
        <tr>  
            <td><input type="text" value="C1"/></td>
            <td><input type="text" value="2"/></td>
            <td><input type="text" value="25"/></td>
        </tr>
</tbody>
</table>
<button id=summarise ">Summarise</button>

<table id="SummarizedTable">
//here the summary table should come.
</table>

JS

SqIn: +(element.childNodes[1].firstElementChild.value)

Answer 1

接近伪代码形式，但它将如下所示：

var myList = {};
$('input[id^="code"]').each(function(){    // Grab all input with ID begins with 'code'
    var myID = $(this).attr("id");         // Get the actual ID
    if( myList[myID] == '' ){              
        var value = 0;
        $('input').find('[id=' + myID + ']').each(function(){
            value += $(this).next().val(); // Get the all elements next to all 'id=myID'
        });
        myList[myID] = value;              // Insert the total
    }
});

for( var i in myList ){
    var id = i;
    var value = myList[i];
    // Draw the summary <td> using the id and the value here
}

Answer 2

创建一个数组来保存单元格信息var cells = [];
从DOM中读取单元格信息，并将每条记录添加到数组cells.push({code: 'A1', SqIn: 25});
使用Array.prototype.reduce对数组中的单元格信息进行组合和求和。
从tbody

table

添加reduce（3）

一个例子

CSS

table, th, td {
    border: 1px solid black;
}

HTML

<table id="myTable">
    <thead>
        <tr>
            <th>Codes</th>
            <th>SqIn</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A1</td>
            <td>25</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>25</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>25</td>
        </tr>
        <tr>
            <td>A1</td>
            <td>50</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>50</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>50</td>
        </tr>
    </tbody>
</table>
<button id="summarise">Summarise</button>

的Javascript

function emptyNode(node) {
    while (node.firstChild) {
        node.removeChild(node.firstChild);
    }
}

function summariseTable(tableId) {
    var tbody = document.getElementById(tableId).lastElementChild,
        reduced = Array.prototype.map.call(tbody.getElementsByTagName('tr'), function (element) {
            return {
                code: element.firstElementChild.textContent,
                SqIn: +(element.lastElementChild.textContent)
            };
        }).reduce(function (acc, rowData) {
            if (!acc.hasOwnProperty(rowData.code)) {
                acc[rowData.code] = rowData.SqIn;
            } else {
                acc[rowData.code] += rowData.SqIn;
            }

            return acc;
        }, {});

    emptyNode(tbody);
    Object.keys(reduced).forEach(function (code) {
        var row = document.createElement('tr'),
            tdCode = document.createElement('td'),
            tdSqIn = document.createElement('td');

        tdCode.appendChild(document.createTextNode(code));
        tdSqIn.appendChild(document.createTextNode(reduced[code]));
        row.appendChild(tdCode);
        row.appendChild(tdSqIn);
        tbody.appendChild(row);
    });
}

document.getElementById('summarise').addEventListener('click', function () {
    summariseTable('myTable');
}, false);

在jsFiddle

此示例替换当前表的内容，但您可以轻松地创建新表。如果input中有td个，那么请转而使用value。

Javascript汇总了表的重复和唯一条目

2 个答案: