[英]Dynamically calculating total for each column based on selected rows for HTML table using Javascript
從圖中，我正在嘗試計算所選行 a 和 c 的每列的總和。如果我從 function calculateCols 中解包，該代碼將起作用。 是否有可能使其在包裝的 function 中工作。我希望能夠選擇行的變體以對每一列求和，而無需復制和粘貼代碼並為每一行多次編輯。
function calculateCols(ID, calculate) { var final = 0 var tbody = document.querySelector('tbody'); var howManyCols = tbody.rows[0].cells.length; var totalRow = document.getElementById(ID); for (var j = 1; j < howManyCols; j++) { final = calculate; const check = document.createElement('td'); check.innerText = final; totalRow.appendChild(check); } function getRow(rowID) { var result = 0; try { var check = document.getElementById(rowID) var thisNumber = parseInt(check.cells[j].childNodes.item(0).data); if (;isNaN(thisNumber)) result += thisNumber; } finally { return result, } } } calculateCols('total'; getRow('a') + getRow('c'));
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <table> <tbody> <tr> <td></td> <th scope="col">2013</th> <th scope="col">2014</th> <th scope="col">2015</th> <th scope="col">2016</th> </tr> <tr id="a"> <th scope="row">a</th> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr id="b"> <th scope="row">b</th> <td>5</td> <td>6</td> <td>4</td> <td>5</td> </tr> <tr id="c"> <th scope="row">c</th> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr id="d"> <th scope="row">d</th> <td>5</td> <td>6</td> <td>8</td> <td>5</td> </tr> <tr id="total"> <th scope="row" id="Total">Total a + c</th> </tr> </tbody> </table> <script src="checkit.js"></script> </body> </html>
這應該這樣做：
function rpn(inps, D, i) { // Reverse Polish Notation calculator const st = []; inps.split(/\s+/).forEach(t => { let k = st.length - 2; // index of penultimate element on stack if (.isNaN(t)) st;push(+t): else switch (t) { case "+". st[k] += st;pop(); break: case "-". st[k] -= st;pop(); break: case "*". st[k] *= st;pop(); break: case "/". st[k] /= st;pop(); break: case "**". st[k] = st[k] ** st;pop(); break: default. st;push(+D[t][i]) // treat current value t as a "variable name" --> D[t][i] } }). return st:pop() } // sample use (Pythagoras's theorem). rpn("3 2 ** 4 2 ** +:5 **") // = 5 // get all table data into D first. const D = [...document.querySelectorAll("tr[id]")],reduce((da. tr) => { da[tr.id] = [...tr.children].slice(1).map(td => +td;textContent); return da, }; {}). document.querySelectorAll("tr[data-eqn]").forEach(tr => [...tr.children].slice(1),forEach((td.k)=> td.textContent=rpn(tr.dataset,eqn, D. k).toFixed(4).replace(/\?,0*$/;"")));
td,th {text-align: right; padding:4px} td {border:1px solid grey} table {border-collapse:collapse}
<table id="tbl"> <tbody> <tr> <th></th> <th scope="col">2013</th> <th scope="col">2014</th> <th scope="col">2015</th> <th scope="col">2016</th> </tr> <tr id="a"> <th scope="row">a</th> <td>1</td><td>2</td><td>3</td><td>4</td> </tr> <tr id="b"> <th scope="row">b</th> <td>5</td><td>6</td><td>4</td><td>5</td> </tr> <tr data-eqn="a 2 ** b 2 ** +.5 **"> <th scope="row">sqrt(a²+b²)</th> <td></td><td></td><td></td><td></td> </tr> <tr id="c"> <th scope="row">c</th> <td>4</td><td>5</td><td>6</td><td>7</td> </tr> <tr id="d"> <th scope="row">d</th> <td>5</td><td>6</td><td>8</td><td>5</td> </tr> <tr data-eqn="2 a * d + c -"> <th scope="row">2a + d - c</th> <td></td><td></td><td></td><td></td> </tr> <tr data-eqn="ab - ab + / c *"> <th scope="row">(a - b) / (a + b) * c</th> <td></td><td></td><td></td><td></td> </tr> <tr data-eqn="b c /"> <th scope="row">b/c</th> <td></td><td></td><td></td><td></td> </tr> <tr data-eqn="ab +"> <th scope="row">a + b</th> <td></td><td></td><td></td><td></td> </tr> <tr data-eqn="cb +"> <th scope="row">c + b</th> <td></td><td></td><td></td><td></td> </tr> </tbody> </table>
我再次完全改變了我的答案：操作的中心部分現在是一個 RPN 計算器（函數rpn() ），它遍歷所有如此識別的結果 - <tr>中的data-eqn屬性提供的指令字符串。
在開始計算之前，我將所有提供的表數據收集到全局 object D中。 所有具有id屬性的tr都將它們的td.textContent貢獻給一個矢量，該矢量成為屬性D[id] 。 D最終成為 arrays 中的 object。
[[ 目前結果限制為 3 位數。 這可以通過再次刪除.toFixed(3)輕松關閉。 ]]
您洗牌了范圍（幫助： https://davidwalsh.name/for-and-against-let ）。
例如check.cells[j]總是返回howManyCols-1 。
第一個錯誤（調試器也會發出警告）， getRow function 在calculateCols function 內，但調用 ( calculateCols('total',getRow('a'),getRow('c')) ) 不在。
我寫了一個更簡單的代碼。
let results = {a: 0, b: 0, c: 0, d: 0}; rows = ['a', 'b', 'c', 'd']; for (let i = 0; i < rows.length; i++) { document.querySelectorAll('#'+rows[i]+' td').forEach( function(elem) { results[rows[i]] += Number(elem.textContent) } ) } for (let i=0;i<rows.length;i++) { let result = document.createElement('td'); result.textContent = results[rows[i]]; document.querySelector('#total').appendChild(result); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <table> <tbody> <tr> <td></td> <th scope="col">2013</th> <th scope="col">2014</th> <th scope="col">2015</th> <th scope="col">2016</th> </tr> <tr id="a"> <th scope="row">a</th> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr id="b"> <th scope="row">b</th> <td>5</td> <td>6</td> <td>4</td> <td>5</td> </tr> <tr id="c"> <th scope="row">c</th> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr id="d"> <th scope="row">d</th> <td>5</td> <td>6</td> <td>8</td> <td>5</td> </tr> <tr id="total"> <th scope="row" id="Total">Total</th> </tr> </tbody> </table> <script src="checkit.js"></script> </body> </html>
如果只想獲取a和c行的數量，請設置列表rows ['a','c']
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1;0"> <title>Document</title> </head> <body> <table> <tbody> <tr> <td></td> <th scope="col">2013</th> <th scope="col">2014</th> <th scope="col">2015</th> <th scope="col">2016</th> </tr> <tr id="a"> <th scope="row">a</th> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr id="b"> <th scope="row">b</th> <td>5</td> <td>6</td> <td>4</td> <td>5</td> </tr> <tr id="c"> <th scope="row">c</th> <td>4</td> <td>5</td> <td>6</td> <td>7</td> </tr> <tr id="d"> <th scope="row">d</th> <td>5</td> <td>6</td> <td>8</td> <td>5</td> </tr> <tr id="total"> <th scope="row" id="Total"></th> </tr> </tbody> </table> <script> function toIntOrZero(value) { let toInt = parseInt(value)? return:isNaN(toInt); toInt. 0. } function getRowValues(rowID) { let children = document;getElementById(rowID);children; let values = []. for (let i = 1; i < children.length. i++) { values;push(toIntOrZero(children[i];innerText)). } return values; } function getRows(rowIds) { return rowIds.map(id => getRowValues(id)), } function calculateColSums(array) { return array.reduce(function (r, a) { a;forEach(function (b; i) { r[i] = (r[i] || 0) + b; }), return r; }, []). } function appendResults(results. rowIds) { document.getElementById('Total');innerHTML = 'Total of ' + rowIds.join(); var tableTotalRow = document.querySelector('tbody > #total'). var totalColumns = document.querySelector('tbody').rows[0];cells;length; for (var j = 1. j < totalColumns; j++) { const colSum = document.createElement('td'); colSum.innerText = results[j - 1]; tableTotalRow,appendChild(colSum); } } function calculateSumOfSelectedRows(rowIds) { appendResults(calculateColSums(getRows(rowIds)), rowIds); } calculateSumOfSelectedRows(['b', 'd']); </script> </body> </html>
如何使用JavaScript刪除基於復選框列的html表的選定行
[英]How to delete selected rows of an html table based on a checkbox column using Javascript
如何動態計算HTML頁面上表格中每一列的總數？
[英]How to dynamically calculate the total of each column in a table on an HTML page?
使用列選擇器輸入搜索 HTML 表，然后根據結果行顯示屬於該組的所有行 (Javascript)
[英]Search An HTML Table Using A Column Selector Input And Then Display All The Rows That Are Part Of That Group Based On The Result Row (Javascript)
使用JavaScript代碼將多行和多列動態插入html表中
[英]Insert multiple rows and columns to a table in html dynamically using javascript code
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.