javascript - 使用 JavaScript(而非 JQuery)添加新列时在 TableCell 中计算新的 AveValue

Question

我有一个<th>具有指定类别的标题行，以及具有指定类别的一个固定行。两者都是contenteditable 。我正在添加新行和新列。我想计算最终单元格中的 AverageValue。我已经在固定数量的行上尝试了代码并且它有效，但是当我尝试这种方式时，它只接受列数，而不是插入的数据。它也无法识别行数据。我显然缺少一个功能？!

我正处于需要一双额外的眼睛的阶段。

JavaScript:

func = function() {
  var table = document.getElementById("mytable");
  var rows = table.rows;

  for (var j = 1; j < rows.length; j++) {
    var total = 0;
    var cells = rows[j].cells;

    for (var i = 2; i < (cells.length - 1); i++) {
      var a = document.getElementById("mytable").rows[j].cells[i].innerHTML;
      a = parseInt(a);

      if (!isNaN(a)) {
        total = total + a;
      }
    }
    total = total / (cells.length - 3);
    total = Math.round(total);

    if (total < 40) {
      document.getElementById("mytable").rows[j].cells[cells.length - 1].style.backgroundColor = "red";
      document.getElementById("mytable").rows[j].cells[cells.length - 1].style.color = "white";
    }

    document.getElementById("mytable").rows[j].cells[cells.length - 1].innerHTML = total + "%";
  }
}

addRow = function() {
  var table = document.getElementById('mytable'); // table reference
  var row = table.insertRow(table.rows.length); // append table row

  // insert table cells to the new row
  for (i = 0; i < table.rows[0].cells.length; i++) {
    createCell(row.insertCell(i), "-");
  }
}

createCell = function(cell, text, style) {
  var div = document.createElement('div');
  txt = document.createTextNode(text);
  div.appendChild(txt); // append text node to the DIV
  div.setAttribute("class", style); // set DIV class attribute
  div.setAttribute("className", style);
  div.setAttribute("contenteditable", true);
  div.setAttribute('placeholder', '' - '');
  cell.appendChild(div); // append DIV to the table cell
}

createCellCol = function(cell, text, style) {
  var div = document.createElement('div');
  txt = document.createTextNode(text);
  div.appendChild(txt); // append text node to the DIV
  div.setAttribute("class", style); // set DIV class attribute
  div.setAttribute("className", style);
  div.setAttribute("contenteditable", true);
  div.setAttribute("placeholder", "-");
  cell.appendChild(div); // append DIV to the table cell
}

addColumn = function() {
  var table = document.getElementById("mytable"); // table reference

  var rowNums = table.rows.length;

  for (i = 0; i < rowNums; i++) {
    if (i == 0) {
      createCell(table.rows[i].insertCell(table.rows[i].cells.length - 1), "-");
    } else {
      createCellCol(table.rows[i].insertCell(table.rows[i].cells.length - 1), "-");
    }
  }
}

HTML:

<table class="tg" id="mytable">
  <tr>
    <th class="tg-s6z2" contenteditable="true">Student Name</th>
    <th class="tg-s6z2" contenteditable="true">Student ID</th>
    <th class="tg-s6z2" contenteditable="true">Assignment 1</th>
    <th class="tg-s6z2" contenteditable="true">Final Grade</th>
  </tr>
  <tr>
    <td class="tg-031e" contenteditable="true">Student1</td>
    <td class="tg-031e" contenteditable="true">StudentNo</td>
    <td class="tg-0ord" contenteditable="true"></td>
    <td class="tg-0ord" contenteditable="true"></td>
  </tr>
</table>

<button id="btnFinalGrade" class="btn btn-action" onClick="func();">Final Grade</button>

<button id="btnaddRow" class="btn btn-action" onclick="addRow();">AddRow</button>

<button id="btnaddColumn" class="btn btn-action" onclick="addColumn();">AddColumn</button>

Answer 1

您将 div 添加到 td 元素，该元素在执行此行 document.getElementById("mytable").rows[j] 时抛出错误。单元格[i].innerHTML它返回一个 div 元素而不是您输入的文本!

无需添加div，这是更新后的代码，

    func = function () {
    var table = document.getElementById("mytable");
    var rows = table.rows;
    for (var j = 1; j < rows.length; j++) {
        var total = 0;
        var cells = rows[j].cells;
        for (var i = 2; i < (cells.length - 1); i++) {
            var a = document.getElementById("mytable").rows[j].cells[i].innerHTML;
            a = parseInt(a);
            if (!isNaN(a)) {
                total = total + a;
            }
        }
        total = total / (cells.length - 3);
        total = Math.round(total);

        if (total < 40) {
            document.getElementById("mytable").rows[j].cells[cells.length - 1].style.backgroundColor = "red";
            document.getElementById("mytable").rows[j].cells[cells.length - 1].style.color = "white";
        }
        document.getElementById("mytable").rows[j].cells[cells.length - 1].innerHTML = total + "%";
    }

}

addRow = function () {
    var table = document.getElementById('mytable'); // table reference
    var row = table.insertRow(table.rows.length); // append table row

    // insert table cells to the new row
    for (i = 0; i < table.rows[0].cells.length; i++) {
        createCell(row.insertCell(i), "-","tg-031e");
    }
}

createCell = function (cell, text, style) {
    var div = document.createElement('td');
    txt = document.createTextNode(text);
    cell.appendChild(txt); // append text node to the DIV
    cell.setAttribute("class", style); // set DIV class attribute
    cell.setAttribute("className", style);
    cell.setAttribute("contenteditable", true);
    cell.setAttribute('placeholder', '' - '');
    //cell.appendChild(div); // append DIV to the table cell
}

createCellCol = function (cell, text, style) {
    var div = document.createElement('td');
    txt = document.createTextNode(text);
    cell.appendChild(txt); // append text node to the DIV
    cell.setAttribute("class", style); // set DIV class attribute
    cell.setAttribute("className", style);
    cell.setAttribute("contenteditable", true);
    cell.setAttribute("placeholder", "-");
    //cell.appendChild(div); // append DIV to the table cell
}

addColumn = function () {
    var table = document.getElementById("mytable"); // table reference
    var rowNums = table.rows.length;

    for (i = 0; i < rowNums; i++) {
        if (i == 0) {
            createCell(table.rows[i].insertCell(table.rows[i].cells.length - 1), "-","tg-031e");
        } else {
            createCellCol(table.rows[i].insertCell(table.rows[i].cells.length - 1), "-","tg-s6z2");
        }
    }
}