动态更新表的细胞纯javascript

Question

我有以下代码

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]; 

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

Answer 1

解决方案很简单：它应该是内HTML

免费的一些代码优化：

//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%); 
 
}