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

Question

我编写了一个代码来测试一个问题，并注意到在通过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);

寻找建议。感谢

Answer 1

您可以像使用td和tr一样继续。创建一个新的span元素，然后设置innerHTML。 createTextNode仅用于文本，因此浏览器不会解释标签和HTML实体。

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

Answer 2

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

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

显然可以做几次：

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

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;