JavaScript笔记(元素)-1

创建一个元素var indexTable=document.createElement(类型);
往元素里边增加一个子节电indexTable.appendChild(子节点);
基本上大部分的HTML都可以通过这种方式构成

HTML里边的Table把
例如
<table>
 <tr>
  <td></td>
  <td></td>
 </tr>
</table>

首先创建一个table的元素
var indexTable=document.createElement("table");
然后创建一列
var indexTR=document.createElement("tr");
接着创建行
Var indexTD1=document.createElement("td");
Var indexTD2=document.createElement("td");
然后就是将节点组合起来了
indexTR.appendChild(indexTD1);
indexTR.appendChild(indexTD2);
indexTable.appendChild(indexTR);
然后追加到页面上去document.body.appendChild(indexTable);
虽然照平时写的HTML里边的Table是这样的，不过其实有个问题，就是缺少了<tbody>,这个元素，其实是看不到表的。

所以在用JS生成表时，必须再table的元素后边加上tbody然后再追加tr和td

JS里边生成Table个结构应该是这样的
<table>
 <tbody>
  <tr>
   <td></td>
   <td></td>
  </tr>
 <tbody>
</table>
别少了<tbody>这个元素。。。。。 

 

<script language=javascript type="text/javascript">
        var indexString="1_2_3_4_5_6_7_8"
        var currentIndex=0;
        var indexLength=5;
        var maxIndex;
        var minIndex=0;
        function CreatPageIndex()
        ...{
            var stringArray=indexString.split("_");
            var tdArray=new Array();
            var imgArray=new Array();
            maxIndex=stringArray.length;
            var indexTable=document.createElement("table");
            var indexTbody=document.createElement("tbody");
            var indexTR=document.createElement("tr");
            indexTbody.appendChild(indexTR);
            indexTable.appendChild(indexTbody);
            
            imgArray.push(document.createElement("td"));
            imgArray[0].innerHTML="<img src='Images/left.gif'>";
            indexTR.appendChild(imgArray[0]);
            
            for(var i=0;i<indexLength;i++)
            ...{
                tdArray.push(document.createElement("td"));
                indexTR.appendChild(tdArray[i]);
                tdArray[i].innerHTML=stringArray[i];
            }
            
            imgArray.push(document.createElement("td"));
            imgArray[1].innerHTML="<img src='Images/rigth.gif'>";
            indexTR.appendChild(imgArray[1]);
            
            imgArray[0].onclick=function()
            ...{
                if(currentIndex>0)
                ...{
                    currentIndex--;
                    for(var i=0;i<indexLength;i++)
                    ...{
                        tdArray[i].innerHTML=stringArray[currentIndex+i];
                    } 
                }
            }
            
            imgArray[1].onclick=function()
            ...{
                //alert(currentIndex);
                if(currentIndex+indexLength<stringArray.length)
                ...{
                    currentIndex++;
                    for(var i=0;i<indexLength;i++)
                    ...{
                        tdArray[i].innerHTML=stringArray[currentIndex+i];
                    } 
                }
            }
            
            document.body.appendChild(indexTable);
            //alert(indexTable.outerHTML);
        }
    </script>