动态更新表格单元格纯JavaScript [英] Dynamically update table cells pure javascript
本文介绍了动态更新表格单元格纯JavaScript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下代码
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);
每次传输文件时,都会调用下面的代码.
The code below is called every time a file is transferred and there is another file to be transferred.
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];
表已创建(请检查图片),但未填充数据.
The table is created (please check the picture) but is not populated with data.
推荐答案
解决方案非常简单:它应该是内部的 HTML
Solution was very simple: it should be 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%);
}
这篇关于动态更新表格单元格纯JavaScript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文