Question

有人能告诉我为什么以下代码无法为我正在创建的表添加边框。感谢

<html>
   <head>
    <title>Exam5 review</title>
    <style type="text/css">
        table.center
            {
                border: 1px;
                background-color: green;
                width: 500px;
                text-align: center;
                margin-left:auto; 
                margin-right:auto;
            }
    </style>
    <script type="text/javascript">
        function parse()
        {
            document.open();
            document.write('<table class="center">');
            document.write('<tr><th>Course</th><th>Enrollment</th></tr>');
            document.write("</table>");
        }
        </script>
</head>
<body onload="parse();">
</body>
</html>

Answer 1

<强> 1）。说明。它不起作用，因为document.write（确切地说是document.open）在插入表时会完全覆盖整个文档结构。所以你的风格已经消失了。因此，根本不要使用document.write。只有极少数情况下你想要使用它，而这个不是其中之一。

以下是document.open {/ 1}}上的documentations所说的内容：

如果目标中存在文档，则此方法会清除它。

<强> 2）。正确的方法。如果你想插入一些HTML，使用超酷和低估的insertAdjacentHTML方法：

function parse() {
    var table = 
        '<table class="center">' +
            '<tr>' + 
                '<th>Course</th><th>Enrollment</th>' +
            '</tr>' + 
        '</table>';
    document.body.insertAdjacentHTML('beforeend', table);
}

parse();

第3）。边框样式。在呈现的表格中，您会发现写border: 1px;来设置表格边框是不够的。您缺少颜色和边框样式定义。它应该是：

border: 1px #AAA solid;

border property上的文档。

演示：http://jsfiddle.net/8h7tw244/

Answer 2

根据MDN，document.open将在打开文档之前清除文档。 https://developer.mozilla.org/en-US/docs/Web/API/document.open

您可以尝试以下方式：

document.getElementsByTagName("BODY")[0].innerHTML += "<table></table>"

用您需要的任何内容替换表格。这应该有用。

Answer 3

你的Body标签应该在head标签之前。通过javascript在容器中写表。

<html>  
<body>
<head>
<title>Exam5 review</title> 
<style>
.center{
border: 1px solid red;
background-color: green;
width: 500px;
text-align: center;
margin-left:auto; 
margin-right:auto;
}
</style>
</head>
<div id="container">
</div>
<script type = "text/javascript">
function parse()
{
var cont= document.getElementById("container");
cont.innerHTML = '<table class= "center" > <tr><th>Course</th><th>Enrollment</th></tr></table>';
}parse();
</script>
</body>
</html>

Answer 4

    <script type = "text/javascript">
        function parse()
        {
            var html = '<table class="center"><tr><th>Cource</th><th>Enrollment</th></tr></table>';
            appendHtml(document.body, html); // "body" has two more children - h1 and span.

        }

        function appendHtml(el, str) {
          var div = document.createElement('div');
          div.innerHTML = str;
          while (div.children.length > 0) {
            el.appendChild(div.children[0]);
          }
        }


        </script>

</head>
<body onload="parse();">
</body>

Answer 5

如前所述，您应该避免使用document.open。更好地使用这个js片段：

document.body.innerHTML += '<table class= "center" ><tr><th>Course</th><th>Enrollment</th></tr></table>';

在您的文档中，它应如下所示：（JsFiddle用于演示）

<html>
   <head>
    <title>Exam5 review</title>
    <style type="text/css">
        table.center
            {
                border: 1px;
                background-color: green;
                width: 500px;
                text-align: center;
                margin-left:auto; 
                margin-right:auto;
            }
    </style>
    <script type="text/javascript">
        document.body.innerHTML += '<table class= "center" ><tr><th>Course</th><th>Enrollment</th></tr></table>';
    </script>
</head>
<body>
</body>
</html>

使用javaScript创建表并为其添加样式

5 个答案:

演示：http://jsfiddle.net/8h7tw244/