HTML表格用javascript添加列

Question

我显然对 JS 很陌生。我需要解决无法更改 HTML 和 CSS 文件的问题。从 HTML 文件我应该：添加标题为“Sum”的列。（已经这样做了）在底部添加一行，div id 为“sumrow”。（也是这样做的）在最后添加一个按钮。（这样做）单击按钮时将“价格和金额”列中的总计添加到“总和”列中（这是我迷路的地方）就像我说的，我无法更改 HTML 和 CSS 文件中的任何内容。    // Create a newelement and store it in a variable     var newEl = document.createElement('th');    //Create a text node and store it in a variable     var newText = document.createTextNode('Summa');    //Attach the newtext node to the newelement     newEl.appendChild(newText);    //Find the position where the new element should be added     var position = document.getElementsByTagName('tr')[0];    //Insert the newelement into its position     position.appendChild(newEl);                        // Find a <table> element with id="myTable":    var table = document.getElementById("pricetable");        // Create an empty <tr> element and add it to the 1st position of the table:    var row = table.insertRow(-1);        // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:    var cell1 = row.insertCell(0);    var cell2 = row.insertCell(1);    var cell3 = row.insertCell(2);    var cell4 = row.insertCell(3);    var cell5 = row.insertCell(4);    var cell6 = row.insertCell(5);        // Add some text to the new cells:    cell1.innerHTML = "";    cell2.innerHTML = "";    cell3.innerHTML = "";    cell4.innerHTML = sumVal;    cell5.innerHTML = "";    cell6.innerHTML = "";        //Puts divid sumrow    row.setAttribute("id", "sumrow");        var table = document.getElementById("pricetable"), sumVal = 0;        for(var i = 1; i < table.rows.length; i++)    {        sumVal = sumVal + parseInt(table.rows[i].cells[3].innerHTML);    }        //Creates button        var button = document.createElement("button");    button.innerHTML = "Beräkna pris";        // 2. Append somewhere    var body = document.getElementsByTagName("tbody")[0];    body.appendChild(button);    

Answer 1

button.addEventListener("click", medelVarde, true);

button.addEventListener("click", raknaUtMedelvarde, true); 

对于按钮点击事件监听器，您不必添加该medelVarde函数。

另外，说到那个功能，我不太确定那里发生了什么。你想把价格和数量相乘吗？如果是这样，您可以只获取价格单元格的文本并将其乘以输入的金额值（在乘法之前将值转换为数字）。

const [,,, priceCell, amountCell, sumCell] = row.querySelectorAll('td');

const price = Number(priceCell.innerText);

const amount = Number(amountCell.querySelector('input').value);

const sum = price * amount;

这[,,, priceCell, amountCell, sumCell]只是从行中获取所需单元格的简写方式（解构赋值。querySelectorAll返回一个 NodeList，您可以在其中按索引获取元素。

function setUp() {

  // Set up table.

  const table = document.getElementById('pricetable');

  const headerRow = table.querySelector('thead tr');

  const sumHeader = headerRow.insertCell();

  const tbody = table.querySelector('tbody');

  const sumTotalRow = tbody.insertRow();

  const sumTotalCell = sumTotalRow.insertCell();

  sumHeader.innerText = 'Summa';

  sumTotalCell.colSpan = '5';

  sumTotalCell.innerText = 'Total';

  tbody.querySelectorAll('tr').forEach(row => row.insertCell());

  

  // Set up button.

  const btn = document.createElement('button');

  btn.innerText = 'Beräkna pris';

  

  btn.addEventListener('click', () => {

    let total = 0;

  

    tbody.querySelectorAll('tr').forEach((row, i, arr) => {

      if (i < arr.length - 1) {

        const [,,, priceCell, amountCell, sumCell] = row.querySelectorAll('td');

        const price = Number(priceCell.innerText);

        const amount = Number(amountCell.querySelector('input').value);

        const sum = price * amount;

        

        sumCell.innerText = sum;

        total += sum;

      } else {

        const totalCell = row.querySelector('td:last-child');

        

        totalCell.innerText = total;

      }

    });

  });

  

  document.body.appendChild(btn);

}

setUp();

Answer 2

首先，我建议将逻辑包装到函数中，例如

appendRow() {

    //put append row logic here

}

现在让我们继续你的问题，附加一列比附加一行更像是一个技巧。您可能已经注意到 DOM 结构有点复杂。因此，对于一行，您可以正确地向您的 tbody 添加一个节点。对于列，我们需要了解如何创建单元格以及如何向 thead 添加条目。我们将使用insertCell()方法插入单元格，对于行不通的单元格，因此我们需要使用 createElement() 添加 th 并使用 appendChild() 追加它

function appendColumn() {

        // insertCell doesn't work for <th>-Nodes :-(

        var tableHeadRef = document.getElementById('pricetable').tHead; // table reference

        var newTh = document.createElement('th');

        tableHeadRef.rows[0].appendChild(newTh); // inser new th in node in the first row of thead

        newTh.innerHTML = 'thead title';

        

        // open loop for each row in tbody and append cell at the end

        var tableBodyRef = document.getElementById('pricetable').tBodies[0];

        for (var i = 0; i < tableBodyRef.rows.length; i++) {

            var newCell = tableBodyRef.rows[i].insertCell(-1);

            newCell.innerHTML = 'cell text'

        }

    }

编辑：要总结 col 中的值，可以使用相同的方法。我分解了节点以便更好地理解。如果您的表数据包含带有isNaN() 的数字，您可能还想添加一个检查。

function sumColumn(tableId, columnIndex) {

    var tableBodyRef = document.getElementById(tableId).tBodies[0];

    var sum = 0; // Initialize sum counter with 0

    for (var i = 0; i < tableBodyRef.rows.length; i++) {

         var currentRow = tableBodyRef.rows[i]; //access current row

         var currentCell = currentRow.cells[columnIndex]; // look for the right column

         var currentData = currentCell.innerHTML; // grab cells content

         var sum += parseFloat(currentData); // parse content and add to sum

    }

    return sum;

}