javascript动态生成表格时，如何在表格单元格中插入空格

How to insert space in table cell when generating table dynamically by javascript

本文关键字：表格 单元格 空格 插入 动态 javascript      更新时间：2023-09-26

我写了一段代码来测试一个问题，并注意到在用javascript动态生成带有数据的表时无法添加空间。

我使用；添加一些空间，但没有起作用。

此处为完整代码

<div id='table'>
</div>
var array = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var arrayLength = array.length;
var theTable = document.createElement('table');
// Note, don't forget the var keyword!
for (var i = 0, tr, td; i < arrayLength; i++) {
    tr = document.createElement('tr');
    td = document.createElement('td');
    td.appendChild(document.createTextNode('<span>'+array[i].id+'&nbsp;&nbsp;</span>'));
    tr.appendChild(td);
    td = document.createElement('td');
    td.appendChild(document.createTextNode('<span>'+array[i].foo+'&nbsp;&nbsp;</span>'));
    tr.appendChild(td);
    theTable.appendChild(tr);
}
//alert(theTable);
document.getElementById('table').appendChild(theTable);

寻求建议。感谢

您可以继续使用td和tr的相同方法。创建一个新的span元素，然后设置innerHTML。createTextNode只是用于文本，所以浏览器不会解释标记和html实体。

var span = document.createElement('span');
span.innerHTML = array[i].id+'&nbsp;&nbsp;';
td.appendChild(span);

您可以直接将Unicode字符用于空间：

td.appendChild( document.createTextNode( ''u00A0' ) );

显然可以做几次：

td.appendChild( document.createTextNode( ''u00A0'u00A0'u00A0' ) );
// three spaces

您可以使用CSS添加一些填充。

#table td > span {
  padding-right:20px;
}

相关文章：