JavaScript表格覆盖html文件
我有一个任务要编写JavaScript，它将创建一个表(x列，y行...)我设法做到了。我在写入html页面时遇到问题。
我的代码：
document.write('<table border = \"3\">');
while(i <= y)
{
document.write('<tr>');
j = 0;
while(j <= x)
{
if (i == 0)
{
if (j == 0)
{
document.write(' <th></th> ');
}
else
{
document.write('<th>');
document.write("x = " + j);
document.write('</th>');
}
}
else
{
if (j == 0)
{
document.write('<th>');
document.write("y = " + i);
document.write('</th>');
}
else
{
document.write('<td>');
document.write(operation(i,j));
document.write('</td>');
}
}
j++;
}
document.write('</tr>');
i++;
}
document.write('</table>');
}我猜它是因为document.write而覆盖页面的？我怎样才能改变这一点？
回答 2
Stack Overflow用户
发布于 2011-03-21 04:15:03
请勿使用document.write。参见Why is document.write discouraged。
我认为你使用document.write意味着它覆盖了整个页面。如果您在页面加载后调用该函数，则可以正常工作。加载文档后对document.write的所有调用都会创建一个新文档。我们更喜欢DOM操作，因为它是一种不涉及字符串操作的直接编辑DOM的安全方法。
将HTML编写为文本应该留给浏览器，它会解析HTML文件并加载它。
// feature detection for cross browser compliance.
var txt = function(node, text) {
if (node.innerText !== undefined) {
node.innerText = text;
} else if (node.textContent !== undefined) {
node.textContent = text;
}
}
function createTable(rows, columns) {
var table = document.createElement("table");
table.border = '3';
var tbody = document.createElement("tbody");
var thead = document.createElement("thead");
for (var i = 0; i < rows; i++) {
var tr = document.createElement("tr");
for (var j = 0; j < columns; j++) {
var cell;
if (i === 0) {
cell = document.createElement("th");
if (j !== 0) {
txt(cell, "x = " + j);
}
}
else {
if (j == 0) {
cell = document.createElement("th");
txt(cell, "y = " + i);
}
else {
cell = document.createElement("td");
txt(cell, operation(i, j));
}
}
tr.appendChild(cell);
}
if (i === 0) {
thead.appendChild(tr);
} else {
tbody.appendChild(tr);
}
}
table.appendChild(thead);
table.appendChild(tbody);
return table;
}使用DOM操作，您可以像上面这样做。可能有一些我遗漏的优化。Live example (仅测试chrome 10)
至少它能像预期的那样工作。
如果您想看到jQuery或其他DOM操作库中实现，请让我知道。在跨浏览器遵从性方面，代码将会更好，更健壮。
Stack Overflow用户
发布于 2011-03-21 03:39:40
我在这里看到了一些问题。首先也是最重要的，我不相信你的代码是适当平衡的。我认为作为第一步，它应该看起来更像：
<script language="javascript">
document.write('<table border = \"3\">');
while(i <= y) {
document.write('<tr>');
j = 0;
while(j <= x) {
if (i == 0) {
if (j == 0) {
document.write(' <th></th> ');
} else {
document.write('<th>');
document.write("x = " + j);
document.write('</th>');
}
} else {
if (j == 0) {
document.write('<th>');
document.write("y = " + i);
document.write('</th>');
} else {
document.write('<td>');
document.write(operation(i,j));
document.write('</td>');
}
}
j++;
}
document.write('</tr>');
i++;
}
document.write('</table>');
</script>其次，在我看来，你从来没有真正实例化过i，而当你用j实例化时，你做得还不够早。
在(i <= y)行上，解释器基本上看到：
while (undefined <= undefined) {在某种程度上，老实说，我不确定document.writes是否真的是最好的解决方案，我可能会推荐使用document.createElement，但这可能更多的是个人偏好。
试图更上一层楼，但坚持你的方法论，我可能会这样看：
function generateTable (width, height) {
document.write("<table border=\"3\">");
var i = 1;
while (i <= height) {
document.write("<tr>");
var j = 1;
while (j <= width) {
if (i == 0) {
// header row
document.write("<th>"+ j +" x "+ i +"</th>");
} else {
document.write("<td>"+ j +" x "+ i +"</td>");
}
j++;
}
document.write("</tr>");
i++;
}
document.write("</table>");
}
generateTable(5, 10);https://stackoverflow.com/questions/5370831
复制相似问题