【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>         

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

【JavaScript】---DOM创建表格_第1张图片

但是这种做法就是把表格写死在代码中,不灵活,而且代码量增加,如果每个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的知识还有很多,要一步一步的总结才能更好的应用!

你可能感兴趣的:(【JavaScript】---DOM创建表格)