在 Javascript document.write 中添加空格
Adding whitespace in a Javascript document.write
所以我目前正在使用一些 JavaScript 和一组对象创建动态 table。我需要在两者之间添加一些白色的 space,但是一个 space 是不够的,我需要将其几乎标记出来。最好的方法是什么?到目前为止,这是我的代码:
var sections = {
p1 : {sname: "Dynamic Table", mscore: 20},
p2 : {sname: "IntelliJ Usage", mscore: 10},
p3 : {sname: "Calender Control", mscore: 30},
p4 : {sname: "Active Form", mscore: 20},
p5 : {sname: "Object Database", mscore: 20}
};
document.write(Object.keys(sections).reduce(function(s, p, i) {
var o = sections[p];
return s + (i>0?'<br><br><br><br>':'') + o.sname + ' ' + o.mscore + ' ' }, '')
);
您可以 return s + "<div class='whatever'>" + o.sname + ' ' + o.mscore + "</div>"
并使用 CSS 设置空格。
var sections = {
p1 : {sname: "Dynamic Table", mscore: 20},
p2 : {sname: "IntelliJ Usage", mscore: 10},
p3 : {sname: "Calender Control", mscore: 30},
p4 : {sname: "Active Form", mscore: 20},
p5 : {sname: "Object Database", mscore: 20}
};
document.write(Object.keys(sections).reduce(function(s, p, i) {
var o = sections[p];
return s + "<div class='whatever'>" + o.sname + ' ' + o.mscore + "</div>" }, '')
);
div.whatever { padding-bottom: 5em; }
更新 使用 table:
var sections = {
p1 : {sname: "Dynamic Table", mscore: 20},
p2 : {sname: "IntelliJ Usage", mscore: 10},
p3 : {sname: "Calender Control", mscore: 30},
p4 : {sname: "Active Form", mscore: 20},
p5 : {sname: "Object Database", mscore: 20}
};
document.write("<table>" + Object.keys(sections).reduce(function(s, p, i) {
var o = sections[p];
return s + "<tr><td>" + o.sname + '</td><td>' + o.mscore + "</td></tr>" }, '')
+ "</table>");
td { padding-bottom: 2em }
如果要将白色space 添加到DOM,请尝试使用不间断的space
' '
而不是
' '
这些不间断的 space 可以链接起来。
会强制在页面上显示两个 space。
控制间距的最佳方法是通过 CSS。将每一个包裹在 class 中,并根据口味设计风格。
另一种方法是使用几个不间断空格
。
因此:return s + (i>0?'<br><br><br><br>':'') + o.sname + ' ' + o.mscore + ' ' }, '')
使用四个或五个不间断空格来添加制表符。代码将如下所示
如果您需要在整个显示内容中使用制表符,请考虑 CSS 提供的格式设置选项。
最快的解决方案是将所有部分包裹在 <pre></pre>
标记中。
在您的代码中:
var sections = {
p1 : {sname: "Dynamic Table", mscore: 20},
p2 : {sname: "IntelliJ Usage", mscore: 10},
p3 : {sname: "Calender Control", mscore: 30},
p4 : {sname: "Active Form", mscore: 20},
p5 : {sname: "Object Database", mscore: 20}
};
document.write("<pre>"); //<--here
document.write(Object.keys(sections).reduce(function(s, p, i) {
var o = sections[p];
return s + (i>0?'<br><br><br><br>':'') + o.sname + ' ' + o.mscore + ' ' }, '')
);
document.write("</pre>"); //<--...and here
更好的解决方案是使用 CSS
.wrapper-class {
white-space: nowrap;
}
所以我目前正在使用一些 JavaScript 和一组对象创建动态 table。我需要在两者之间添加一些白色的 space,但是一个 space 是不够的,我需要将其几乎标记出来。最好的方法是什么?到目前为止,这是我的代码:
var sections = {
p1 : {sname: "Dynamic Table", mscore: 20},
p2 : {sname: "IntelliJ Usage", mscore: 10},
p3 : {sname: "Calender Control", mscore: 30},
p4 : {sname: "Active Form", mscore: 20},
p5 : {sname: "Object Database", mscore: 20}
};
document.write(Object.keys(sections).reduce(function(s, p, i) {
var o = sections[p];
return s + (i>0?'<br><br><br><br>':'') + o.sname + ' ' + o.mscore + ' ' }, '')
);
您可以 return s + "<div class='whatever'>" + o.sname + ' ' + o.mscore + "</div>"
并使用 CSS 设置空格。
var sections = {
p1 : {sname: "Dynamic Table", mscore: 20},
p2 : {sname: "IntelliJ Usage", mscore: 10},
p3 : {sname: "Calender Control", mscore: 30},
p4 : {sname: "Active Form", mscore: 20},
p5 : {sname: "Object Database", mscore: 20}
};
document.write(Object.keys(sections).reduce(function(s, p, i) {
var o = sections[p];
return s + "<div class='whatever'>" + o.sname + ' ' + o.mscore + "</div>" }, '')
);
div.whatever { padding-bottom: 5em; }
更新 使用 table:
var sections = {
p1 : {sname: "Dynamic Table", mscore: 20},
p2 : {sname: "IntelliJ Usage", mscore: 10},
p3 : {sname: "Calender Control", mscore: 30},
p4 : {sname: "Active Form", mscore: 20},
p5 : {sname: "Object Database", mscore: 20}
};
document.write("<table>" + Object.keys(sections).reduce(function(s, p, i) {
var o = sections[p];
return s + "<tr><td>" + o.sname + '</td><td>' + o.mscore + "</td></tr>" }, '')
+ "</table>");
td { padding-bottom: 2em }
如果要将白色space 添加到DOM,请尝试使用不间断的space
' '
而不是
' '
这些不间断的 space 可以链接起来。
会强制在页面上显示两个 space。
控制间距的最佳方法是通过 CSS。将每一个包裹在 class 中,并根据口味设计风格。
另一种方法是使用几个不间断空格
。
因此:return s + (i>0?'<br><br><br><br>':'') + o.sname + ' ' + o.mscore + ' ' }, '')
使用四个或五个不间断空格来添加制表符。代码将如下所示
如果您需要在整个显示内容中使用制表符,请考虑 CSS 提供的格式设置选项。
最快的解决方案是将所有部分包裹在 <pre></pre>
标记中。
在您的代码中:
var sections = {
p1 : {sname: "Dynamic Table", mscore: 20},
p2 : {sname: "IntelliJ Usage", mscore: 10},
p3 : {sname: "Calender Control", mscore: 30},
p4 : {sname: "Active Form", mscore: 20},
p5 : {sname: "Object Database", mscore: 20}
};
document.write("<pre>"); //<--here
document.write(Object.keys(sections).reduce(function(s, p, i) {
var o = sections[p];
return s + (i>0?'<br><br><br><br>':'') + o.sname + ' ' + o.mscore + ' ' }, '')
);
document.write("</pre>"); //<--...and here
更好的解决方案是使用 CSS
.wrapper-class {
white-space: nowrap;
}