【JavaScript】---DOM创建表格

什么是DOM？

DOM：即文档对象模型

          D：整个Web加载的网页文档

          O：类似window对象之类的东西，可以调用属性和方法，可以理解为document对象

          M：网页文档的树形结构

          DOM有三个等级：DOM1/DOM2/DOM3其中DOM1是W3C标准。

DOM 定义了访问诸如 XML 和 XHTML 文档的标准。

它有HTML DOM:定义了所有 HTML 元素的对象和属性，以及访问它们的方法（接口）

    XML DOM:定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）

    核心DOM：用于任何结构化文档的标准模型

下面用表格的创建简单说明一下DOM的使用：

创建表格的规则： 在表格里，也就是<table></table>标签里，只能有一个表头<thead>，和一个表尾<tfoot>.表的标题为<caption>只能有一个，<tr>和<td>和<th>标签，在表格里可以有N个。

用HTML创建表格：

我们可以用HTML代码在前台用手写生成表格：例如：

<table>
    <caption>学生成绩统计</caption>
    <thead>
        <tr>
             <th>姓名</th>
             <th>班级</th>
             <th>性别</th>
             <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
             <td>花花</td>
             <td>一班</td>
             <td>女</td>
             <td>88</td>
        </tr>
         <tr>
             <td>毛毛</td>
             <td>二班</td>
             <td>男</td>
             <td>79</td>
        </tr>
    </tbody>
    <tfoot>
         <tr>
             <td>综合为：3456</td>            
        </tr>
    </tfoot>
</table>         

这样就生成了下面这个表：

但是这种做法就是把表格写死在代码中，不灵活，而且代码量增加，如果每个HTML页都需要创建表格那岂不是得写很多的表格代码！！那是要不得的！那么我们要如何解决呢？

用DOM创建表格：

这种方法将代码封装在JS文件中，前台只需要引用这个JS文件（添加一句类似： <script type="text/javascript" src="demo1.js"> </script>的代码就行 ）就可以随时创建表格，减少了重复代码量，还方便了表格的创建，代码如下：

window.onload=function(){
	var table=document.createElement('table');
	table.with=300;
	table.border=1;	
	<span style="color:#009900;">//创建标题</span>
	var caption=document.createElement('caption');
	table.appendChild(caption);
	caption.innerHTML='学生成绩统计';
	
	<span style="color:#009900;">//创建表头,表头里面有tr,tr里面有th</span>
	var thead=document.createElement('thead');
	table.appendChild(thead);
	
	var tr=document.createElement('tr');
	thead.appendChild(tr);

	<span style="color:#009900;">//创建一个th</span>
	var th=document.createElement('th');
	tr.appendChild(th);
	<span style="color:#009900;">//给th添加内容</span>
	th.appendChild(document.createTextNode('姓名'))；<span style="color:#009900;">//用innerHTML也可以</span>	

	<span style="color:#009900;">//再创建一个th</span>
	var th2=document.createElement('th');
	tr.appendChild(th2);
	<span style="color:#009900;">//给th2添加内容</span>
	th2.appendChild(document.createTextNode('班级'))；

        var th3=document.createElement('th');
	tr.appendChild(th3);
	<span style="color:#009900;">//给th3添加内容</span>
	th3.appendChild(document.createTextNode('性别'))；

       var th4=document.createElement('th');
	tr.appendChild(th4);
	<span style="color:#009900;">//给th2添加内容</span>
	th4.appendChild(document.createTextNode('成绩'))；
}

这样是不是方便了很多？但是咱们也看到了它的代码，比较绕，创建表的语句比较繁琐，很容易出错，那么有没有一种更好的方法呢？答案当然是有了！看下面：

用HTML DOM创建表格

这种方法也是将代码放到JS文件中，前台调用方法和用DOM创建表格后一样！

不多说，咱们上代码：

window.onload=function(){
   var table=document.createElement('table');
   table.width=300;
   table.border=1;
   <span style="color:#33cc00;">//创建标题</span>
   table.createCaption().innerHTML='学生成绩统计';
   <span style="color:#009900;">//创建表头</span>
   var thead=table.createTHead();
   var tr=thead.insertRow(0);
   tr.insertCell(0).innerHTML='姓名'；
   tr.insertCell(1).innerHTML='班级'；
   tr.insertCell(2).innerHTML='性别'；
   tr.insertCell(3).innerHTML='成绩'；
   
   document.body.appendChild(table);
}

是不是简单很多啊！

总结：

DOM除了可以对表格样式进行操作以外，还可以操作CSS样式。功能非常强大！DOM由于满足正确的语义结构、表现与内容分离等要求，都已经成为网页设计中的基本要求。关于DOM的知识还有很多，要一步一步的总结才能更好的应用！