Javascript表不呈现_Javascript - Fatal编程技术网

Javascript表不呈现

javascript

Javascript表不呈现,javascript,Javascript,我正在尝试使用javascript呈现一个表。下面是html和javascript。我正在用javascript中的HTML绘制相同的表。但是，脚本似乎没有渲染 <!DOCTYPE html> <html> <head> </head> <body> <table width = "50%" border = "1" align = "center"> <thead

我正在尝试使用javascript呈现一个表。下面是html和javascript。我正在用javascript中的HTML绘制相同的表。但是，脚本似乎没有渲染

       <!DOCTYPE html>

 <html>

<head>


</head>


<body>

    <table width = "50%" border = "1" align = "center">
        <thead> 
            <th>ONE</th>
            <th>TWO</th>
            <th>THREE</th>
        </thead>            
        <tbody>
        <tr>
            <td>r1c1</td>
            <td>r1c2</td>
            <td>r1c3</td>
        </tr>
        <tr>
            <td>r2c1</td>
            <td>r2c2</td>
            <td>r2c3</td>
        </tr>
        </tbody>


    </table> 

</body>

<script type = "text/javascript">
    var table = document.createElement("table");
    table.width = "50%";
    table.border = "1";
    table.align = "center";


    //create the table header
    var thead = document.createElement("thead");
    table.appendChild(thead);

    //create the cells inside thead
    thead.insertRow(0);
    thead.rows[0].insertCell(0);
    thead.rows[0].cells[0].appendChild(document.createTextNode("ONE"));
    thead.rows[0].insertCell(1);
    thead.rows[0].cells[1].appendChild(document.createTextNode("TWO"));
    thead.rows[0].insertCell(2);
    thead.rows[0].cells[2].appendChild(document.createTextNode("THREE"));

    //create the table body
    var tbody = document.createElement("tbody");
    table.appendChild(tbody);

    //create the cells inside tbody
    tbody.insertRow(0);//do you start from zero here or 1?
    tbody.rows[0].insertCell(0);
    tbody.rows[0].cells[0].appendChild(document.createTextNode("r1c1"));
    tbody.rows[0].insertCell(1);
    tbody.rows[0].cells[1].appendChild(document.createTextNode("r1c2"));
    tbody.rows[0].insertCell(2);
    tbody.rows[0].cells[2].appendChild(document.createTextNode("r1c3")); 
    //now we make the 2nd row
    tbody.insertRow(1);
    tbody.rows[1].insertCell(0);
    tbody.rows[1].cells[0].appendChild(document.createTextNode("r2c1"));
    tbody.rows[1].insertCell(1);
    tbody.rows[1].cells[1].appendChild(document.createTextNode("r2c2"));
    tbody.rows[1].insertCell(2);
    tbody.rows[1].cells[2].appendChild(document.createTextNode("r2c3")); 
    //now we make the third row
    tbody.insertRow(2);
    tbody.rows[2].insertCell(0);
    tbody.rows[2].cells[0].appendChild(document.createTextNode("r3c1"));
    tbody.rows[2].insertCell(1);
    tbody.rows[2].cells[1].appendChild(document.createTextNode("r3c2"));
    tbody.rows[2].insertCell(2);
    tbody.rows[2].cells[2].appendChild(document.createTextNode("r3c3")); 

</script>
</html>


一个
两个
三
r1c1
r1c2
r1c3
r2c1
r2c2
r2c3
var table=document.createElement（“表”）；
table.width=“50%”；
table.border=“1”；
table.align=“中心”；
//创建表格标题
var thead=document.createElement（“thead”）；
表1.儿童（thead）；
//在AD中创建单元格
thead.insertRow（0）；
thead.rows[0].insertCell（0）；
thead.rows[0]。单元格[0]。appendChild（document.createTextNode（“一”）；
thead.rows[0].insertCell（1）；
thead.rows[0]。单元格[1]。appendChild（document.createTextNode（“两”）；
thead.rows[0].insertCell（2）；
thead.rows[0]。单元格[2]。appendChild（document.createTextNode（“三”）；
//创建表格主体
var tbody=document.createElement（“tbody”）；
表3.儿童（t身体）；
//在主体内部创建单元
tbody.insertRow（0）//你是从零开始还是从1开始？
tbody.rows[0].insertCell（0）；
tbody.rows[0]。单元格[0]。appendChild（document.createTextNode（“r1c1”）；
tbody.rows[0].insertCell（1）；
tbody.rows[0]。单元格[1]。appendChild（document.createTextNode（“r1c2”）；
tbody.rows[0].insertCell（2）；
tbody.rows[0]。单元格[2]。appendChild（document.createTextNode（“r1c3”）；
//现在我们排到第二排
t主体插入行（1）；
tbody.rows[1].insertCell（0）；
tbody.rows[1]。单元格[0]。appendChild（document.createTextNode（“r2c1”）；
tbody.rows[1].insertCell（1）；
tbody.rows[1]。单元格[1]。appendChild（document.createTextNode（“r2c2”）；
tbody.rows[1].insertCell（2）；
tbody.rows[1]。单元格[2]。appendChild（document.createTextNode（“r2c3”）；
//现在我们排到第三排
tbody.insertRow（2）；
tbody.rows[2].insertCell（0）；
tbody.rows[2]。单元格[0]。appendChild（document.createTextNode（“r3c1”）；
tbody.rows[2].insertCell（1）；
tbody.rows[2]。单元格[1]。appendChild（document.createTextNode（“r3c2”）；
tbody.rows[2].insertCell（2）；
tbody.rows[2]。cells[2]。appendChild（document.createTextNode（“r3c3”）；

如何显示第二张桌子？我的代码的哪些部分是错误的？我故意不使用DOM方法

感激地 saad

错误：您已经创建了元素，但尚未将其附加到主体

document.getElementsByTagName("body")[0].appendChild(table);

另一个解决方案：如果您可以使用jQuery，那么它的复杂度也会大大降低，而且更简单

<script type = "text/javascript">
    var table = $("<table>", {width: '50%', border: 1, align: 'center'});

    //create the cells inside thead
    var row = $("<tr />").append("<th>One</th>").append("<th>Two</th>").append("<th>Three</th>");
  //create the table header

  var thead = $("<thead />").append(row);
    table.append(thead);

    //create the table body
  var tbody = $("<tbody />");

    //create the cells inside tbody
    var r1 = $("<tr />").html("<td>r1c1</td><td>r1c2</td><td>r1c3</td>");
    tbody.append(r1);

    //now we make the 2nd row
    var r2 = $("<tr />").html("<td>r2c1</td><td>r2c2</td><td>r2c3</td>");
    tbody.append(r2);

    //now we make the third row
    var r3 = $("<tr />").html("<td>r3c1</td><td>r3c2</td><td>r3c3</td>");
    tbody.append(r3);

    table.append(tbody);
    $("body").append(table);

</script>

小提琴手：非常感谢。我想知道为什么单元格中的文本不像表中那样粗体和居中。您没有在

th {font-weight: bold; text-align: center;}