25 Click the button to create a table (createElement way)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{
          width: 200px;
          height: 200px;
          border: 1px solid red;
        }
      </style>
    </head>
    <body>
        <input type="button" value="创建表格" id="btn" />
        <div id="dv"></div>
        <script src="common.js"></script>
        <script type="text/javascript">
            var arr = [
                {name: "百度",href: "http://www.baidu.com"},
                {name: "谷歌",href: "http://www.google.com"},
                name {: " excellent cool " , the href: " http://www.youku.com " }, 
                {name: " potato " , the href: " http://www.tudou.com " }, 
                {name: " Nora " , href: " http://www.kuaibo.com " }, 
                {name: " love Fantastic Art " , href: " http://www.aiqiyi.com " } 
            ]; 
            // add button click event 
            my $ ( 'btn") .onclick =  function () {
                 // Create a table element, appended to the parent element and the div 
                var taObj = document.createElement ( " table " ); 
                taObj.border =  " . 1 " ; 
                taObj.cellPadding =  " 0 " ; 
                taObj .cellSpacing =  " 0 " ; 
                My $ ( " DV " ) .appendChild (taObj); 

                for ( var I =  0 ; I< Arr.length; I ++ ) {
                     // create a row, the row content is added, and the table appended to the parent element 
                    var trObj = document.createElement ( " TR " ); 
                    taObj.appendChild (trObj); 
                    // Create the first column, and then added to the row 
                    var the td1 = document.createElement ( " TD " ); 
                    td1.innerHTML = ARR [I] .name; 
                    trObj.appendChild (the td1); 
                    // Create a second row, followed by addition of to row 
                    var TD2 = document.createElement ( " TD ");
                    td2.innerHTML = "<a href=" + arr[i].href + ">" + arr[i].name + "</a>";
                    trObj.appendChild(td2);
                }
            };
        </script>

    </body>
</html>
25 Click the button to create a table (createElement way)

Guess you like
