使用纯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);

---

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

解决方案非常简单：它应该是innerHTML

一些免费的代码优化：

//将主体背景移动到CSS //这很好，使用createElement创建一个表 tbl=document.createElement'table'； tbl.setAttribute'id'，'tab'； tbl.className=进度； //将表格样式移动到css txt=[“传输状态”，“文件名：”，“传输的字节：”，“%传输的：”]； 对于var i=0；i<4；i++{ //在每个循环中创建一个div var divContainer=document.createElement'div'； //给它一个类名 divContainer.className='container'； var tr=tbl.insertRow； var td=tr.insertCell； td.appendChilddocument.createTextNodeText[i]； //追加div td.1集装箱； } document.body.appendChildtbl； 功能更新{ var table=document.getElementById'tab'； //tr选择是不必要的 var tds=table.querySelector all'tr:not:first child>td'；//querySelector更为现代-选择除第一个之外的所有tds-它描述了表内容，不应更新。 var vl=[CurrentFileName，ByTestTransferredThisFile+'of'+TotalBytesThisFile，strPerc_1]； Array.prototype.forEach.calltds，functionelement，索引{ 元素.querySelector'.container'.textContent=vl[index]； }; } //模拟： 变量文件={ 当前文件名：test1， ByTestTransferred此文件：0， TotalBytesThisFile:10240， strPerc_1:0 }; 定时器=设置间隔功能{ files.bytesttransferredthis file+=1000； CurrentFileName=files.CurrentFileName； ByTestTransferredThisFile=files.ByTestTransferredThisFile； TotalBytesThisFile=files.TotalBytesThisFile； strPerc_1=files.bytesttransferredthisfile/files.TotalBytesThisFile*100.toFixed1； if files.bytesttransferredthis文件

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