动态更新表格单元纯 javascript答案

【问题标题】：Dynamically update table cells pure javascript动态更新表格单元纯 javascript
【发布时间】：2018-03-22 01:41:06
【问题描述】：

我有以下代码

body = document.body;
tbl = document.createElement('table');
tbl.setAttribute('id','tab');

document.body.style.background = "rgba(0, 0, 0, 0.4)"
tbl.contentEditable = 'true';
tbl.style.border = '1px solid white';
tbl.style.backgroundColor = '#ffffff';
tbl.style.width = '25%';
tbl.style.marginBottom = '1300px';
tbl.style.marginLeft = '500px';
tbl.style.transform ='translateY(50%)'

txt = ['Transfer Status','File name: ', 'Bytes Transferred: ', '% Transferred: '];
    var divContainer = document.createElement('div');
    divContainer.setAttribute('id','container');
    divContainer.contentEditable = 'true';
    for(var i = 0; i < 4; i++){
        var tr = tbl.insertRow();
        var td = tr.insertCell(); 
        td.appendChild(document.createTextNode(txt[i]));
        td.appendChild(divContainer);
    }
    body.appendChild(tbl);

每次传输一个文件并且有另一个文件要传输时，都会调用下面的代码。

var table = document.getElementById('tab');
var trs = table.getElementsByTagName('tr');
var tds = table.getElementsByTagName('td');
var fname = txt[1] + CurrentFileName;
var Btransf  = txt[2] + BytesTransferredThisFile + ' of ' + TotalBytesThisFile;
var transf = txt[3] + strPerc_1;
var vl = ['',fname,Btransf,transf];
tds[1].innerHtml = vl[1];
tds[2].innerHtml = vl[2];
tds[3].innerHtml = vl[3];

表已创建（请查看图片）但未填充数据。

【问题讨论】：

标签： javascript dom html-table

【解决方案1】：

解决方法很简单：应该是innerHTML

一些免费的代码优化：

//moved the body background to CSS

//this is fine, create a table with createElement
tbl = document.createElement('table');
tbl.setAttribute('id', 'tab');
tbl.className = "progress";
//moved table style to css


txt = ['Transfer Status', 'File name:', 'Bytes Transferred:', '% Transferred:'];


for (var i = 0; i < 4; i++) {

  //create a div in every loop
  var divContainer = document.createElement('div');
  //give it a classname
  divContainer.className = 'container';

  var tr = tbl.insertRow();
  var td = tr.insertCell();
  td.appendChild(document.createTextNode(txt[i]));

  //append the div
  td.appendChild(divContainer);
}

document.body.appendChild(tbl);

function update() {
  var table = document.getElementById('tab');
  //tr selection is unnecessary
  var tds = table.querySelectorAll('tr:not(:first-child) > td'); //querySelector is more modern - select all tds except the first - which describes the table content and should not be updated.

  var vl = [CurrentFileName, BytesTransferredThisFile + ' of ' + TotalBytesThisFile, strPerc_1];

Array.prototype.forEach.call(tds, function(element, index) {

    element.querySelector('.container').textContent = vl[index];
  });



}

//simulation:
var files = {
  "currentFileName": "test1",
  "BytesTransferredThisFile": 0,
  "TotalBytesThisFile": 10240,
  "strPerc_1": 0
};

timer = setInterval(function() {
  files.BytesTransferredThisFile += 1000;
  CurrentFileName = files.currentFileName;
  BytesTransferredThisFile = files.BytesTransferredThisFile;
  TotalBytesThisFile = files.TotalBytesThisFile;
  strPerc_1 = (files.BytesTransferredThisFile / files.TotalBytesThisFile * 100).toFixed(1);

  if (files.BytesTransferredThisFile <= files.TotalBytesThisFile) {
    update();
  } else {
    clearInterval(timer)
  }


}, 1000);

body {
  background: rgba(0, 0, 0, 0.4);
}

table.progress {
  border: 1px solid white;
  background-color: #ffffff;
  width: 25%;
  margin-bottom: 1300px;
  margin-left: 500px;
  transform: translateY(50%);
}

【讨论】：