使用Javascript根據HTML表格的選定行動態計算每列的總數-有解無憂

使用Javascript根據HTML表格的選定行動態計算每列的總數

從圖片中，我試圖計算所選行 a 和 c 的每一列的總數。如果我從函式 calculateCols 中解開代碼，該代碼就可以作業。是否可以使其在包裝函式中作業。我希望能夠為每一列選擇不同的行來求和，而無需復制和粘貼代碼并為每一列進行多次編輯。

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>

uj5u.com熱心網友回復：

這應該這樣做：

function sumUp(){
 const [a,c,total]=["a","c","total"].map(n=>[...document.getElementById(n).children].slice(1));
 a.forEach((ai,i)=>total[i].textContent=  ai.textContent ( c[i].textContent))
}
sumUp();

  <table id="tbl">
    <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>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

到目前為止，我更改了您的表格，為行<td>中的結果添加了一些 s tr#total。其余的相當簡單：您感興趣的行都有唯一id的 s，因此可以直接和單獨地處理它們。我創建了與 s 同名的常量id并回圈了它們的children.

.slice(1)正如我在每個trs上使用的那樣，所選行的第一列是免稅的children。

只要您保持ids 的唯一性，您就可以擁有任意多的列或行。

uj5u.com熱心網友回復：

您改組了范圍（幫助：https ://davidwalsh.name/for-and-against-let ）。
例如check.cells[j]總是回傳howManyCols-1。
第一個錯誤（除錯器也警告），getRow函式在calculateCols函式內，但呼叫（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 a   c</th>

      </tr>
    </tbody>
  </table>
  <script src="checkit.js"></script>

</body>

</html>

如果您只想獲取a和c行的數量，請設定串列rows ['a','c']

uj5u.com熱心網友回復：

<!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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/462540.html

標籤：javascript html 计算列

上一篇：如何合并具有空字串值的物件？

下一篇：呼叫相同的函式將element.style.display更改為在具有不同結果的兩個不同頁面上“阻止”