javascript当中创建table的TD和创建TR的方法

最新推荐文章于 2023-06-01 17:16:51 发布

qq_44594371

最新推荐文章于 2023-06-01 17:16:51 发布

阅读量580

点赞数

原文链接：https://blog.csdn.net/mark_to_win/article/details/88681275

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

例 2.3（CreateTRTDIEFF.html）

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<body>
<table border="1" >
    <tr>
        <td>id</td>
        <td>姓名</td>
    </tr>
      <tbody id="display">
        </tbody>
</table>

</body>
</html>
<script type="text/javascript">
    for (var i = 0; i < 3; i++) {
        var data = ['1', 'qixy'];
        var newRow = generaARow(data);
        var displayTable = document.getElementById("display");
        /*
         TBODY object (Object/HTML)
         An object that encapsulates a <TBODY> tag within a <TABLE> block. Inherits from: Element object,Element object (Object/HTML)
         Inherits from: Node object.
         Node.appendChild() (Method)
         A new child node object is added to the end of the list of immediate children of this node.
         JavaScript syntax: - myNode.appendChild(aNode)
         Argument list: aNode The node to be appended
         */
        displayTable.appendChild(newRow)
    }
    function generaARow(data) {
        var row, cell, txtNode;
        /*
         var a=document.createElement("div"); "div" also is a known element. you can not write as "divxxx". the same thing, we can use "table","select","option" ,etc.
         Document.createElement() (Method)
         A method to create a new element within a document.
         return value is: Element object. Element object is a subclass of Node.
         */
        row = document.createElement("tr");
        for (var i = 0; i < data.length; i++) {
            cell = document.createElement("td");
            /*the following two statements's function is the same as the third statement. we can use either way to achieve goal.*/
            //    txtNode = document.createTextNode(data[i]);
            //    cell.appendChild(txtNode);
更多请见：http://www.mark-to-win.com/tutorial/js_7_createElementtr.html