我有以下代码
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];
答案 0 :(得分: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);
&#13;
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%);
}
&#13;