動態更新表的細胞純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%); 
 
}