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

【问题标题】：Using javaScript to create table and add style to it使用 javaScript 创建表格并为其添加样式
【发布时间】：2014-10-23 12:05:24
【问题描述】：

谁能告诉我为什么下面的代码不能为我正在创建的表格添加边框。谢谢

<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>

【问题讨论】：

标签： javascript html css class

【解决方案1】：

1)。解释。它不起作用，因为document.write（确切地说是document.open）在您插入表格时会完全覆盖整个文档结构。所以你的风格被消灭了。所以永远不要使用document.write。只有极少数情况下你想使用它，而这不是其中之一。

这是documentations 在document.open 上所说的：

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

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/

【讨论】：

【解决方案2】：

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

你可以试试这样的：

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

用您需要的任何东西替换表格。应该可以的。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

如前所述，您应该避免使用document.open。最好用这个js sn-p：

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>

【讨论】：