DIV+CSS+JS在HTML页面制作表格的思想

DIV+CSS+JS在HTML页面制作表格的思想

1.介绍

1. 在如今的前后端分离的开发当中，前端页面技术要求也越来越高了。 因此就在这对自己对前端技术的理解做个简单的整理，方便日后查阅。本文章主要是介绍了如何制作表格的思想。阅读这文章，至少得了解div标签的特性，特别是可以抽象理解div标签的——块思想。还有选择器的知识也是很重要。

2.表格的结构拆分

1. 首先，我的认为。一张基本的表格主要有俩个内容构成——表头和表格主体。所以一般来说，表头已经包含了表格里面想要展现的内容主体。而表格主体只是把具体的数据信息展现出来。所以一张表格中，表头的内容设计非常重要，也是这张表格的灵魂。

这是我制作表格的基本结构思路：


    
表头
    
表格主体

1.表格结构的解读

1. 当想制作一张表格的时候，要做的第一件事——就是设计好表头的每一小格中想展示的名称，这名称就是对应表格主体这一列想要展示的内容。需要注意的是名称要能体现出这一列想表达的内容，在后面做表格的样式设计的时候提供帮助。如果你已经合理的设计好了表头的内容了。那么表头的结构至少是符合下面的结构：

这是表头的基本结构设计思路：

  

         

                 
1
                 
2
                 
3
                 
4
                 

                         
6
                         
7
              	 
           			   ......
         
   

看着上面的代码结构，有一层DIV标签包裹层.看着好像是多余的一层，但是在你设计CSS样式的时候，绝对会 让你省下不少事情。建议以后DIV标签有嵌套DIV标签的时候，合理地加一个DIV标签包裹层,养成一种块级的思 想。这样就可以把一个html页面抽象成一块块的内容，能够在以后页面内容变更的时候，用最小的改变，换最大的效果。上面的结构只是抽象的设计出了表头结构的设计。更详细的设计效果需要借助CSS样式去表达。

2. 当设计好一张表头的结构的时候，很大程度上就相当于设计好了表格主体的内容了。但是有时候，表格主体的内容的某一列需要展现的内容是包含了多列的。此时你需要改变的就是目标列的结构了，做法是嵌套多个div标签。当对div标签和你想展示的列有深刻的理解的时候，那么我相信你肯定你在使用div标签去设计表格结构的时候，一定会一路畅通。

 这是表格主体内容的基本结构设计思路：
 
 

          

	              
1
	              

                      
8
	                  
9
	                  ..........
				  
	              
3
	              
4
	              

	                      
6
	                      
7
	                      .......
               	 
            			   ......
          
    

到目前为止，我们都是说表结构的设计思想。这部分只是为了培养设计表格的时候，能够高度的抽象出表格的总体结构，不带上外观等效果。假设你的表格的各个部分的结构设计的合理、且结构统一、并有一定的规律的时候。那么你的表结构很可能会发展成一种属于你的独特表格框架了。当你制作的表格符合一定的规律的时候，在你设计CSS样式的时候，你就可以在宏观上去设计你这张表格的CSS基本样式了。

2.CSS样式设计解读

1. 一张用div标签制作的表格，必然要加上CSS样式的支持。但是在设计CSS样式的时候，你必须要知道CSS的优先级。因为CSS 的优先级曾经一度给我带来很多烦恼。再者就是表的结构设计是否合理，有规律性。会高度的影响你的CSS代码的复用性。我个人是极度不愿意看到太多重复的CSS代码。因为很多情况下，div的块思想和css的class思想是离不开的彼此的，当俩者可以有机的结合起来的时候。那么恭喜你，你的代码的复用性，可能已经有了基本的模型框架的影子了。那么以后你再做表的设计的时候，当那张表符合这样的结构规律的时候，你不需要重新设计CSS样式表，可以直接复用了。或者你就按这样的表结构规律去设计的表格，那么你需要的事情就会少很多，不用一切从头开始。

    ***插入一小段个人理解***
    我个人对框架的定义可能就是一种高度结构化的东西。
    它事先已经设计好了模块，设计好了一定的CSS样式的封装。
    其实更多时候，我觉得框架就像小孩子玩的那种组装的玩具块一样。
    因为都是已经设计好了基本的形状，大小，颜色之类等等。
    如果你要玩这个玩具的话，那么你就要依据最初这个玩具的构造者所提出的那些最基本的规则之内去玩这个玩具。
    正如玩具一样，丰富了小孩子的世界。而框架只是方便了我们的工作，减少很多工作量，或者把事情简单化。
    所以当你可以把你的表格设计的很基础，css样式设计符合你的表格结构。
    别人可以在你的表结构去增加新的架构，在添加新的css 样式的时候不会破坏最基本的设计，
    那么你的这个表格加CSS设计可能就是一种基本模板原型了。
   

2. 在用css样式+div标签做表格的时候。在CSS样式方面，css种的选择器知识的理解就很重要了。选择就是css样式布局的指挥者，只有清楚的理解这个指挥者的作用、能力。才会知道他可以带来什么样的效果，可以用这个指挥者去做什么样的事情。CSS代码有时候讲究的是层次，所以需要有一种很灵敏的结构感，知道在一定的规律下层次结构，如何写出高度复用性的CSS代码。选择器+灵敏的结构感，在CSS布局方面会起到很重要的作用。所以想要写出漂亮的css代码，很多情况下需要使用选择器，需要好好学习选择器。

3. CSS样式+div标签在表格方面的布局：我个人觉得通常从这几方面去考虑：
   1.div的位置：你要通过css样式，把你想要的div放到你指定的位置。其中绝对定位属性和浮动属性我个人觉得用得很多。不过在使用浮动属性的时候，需要注意的是要在上层模块去清除浮动这个属性，不然会对整体的布局属性造成很大影响。
   2.div的边框：主要是在“边框”属性的布局：因为边框就相当一个块的四条边。在块与块之间的边如何去做处理，就相当与界定边界的定义，这都是需要由这个属性去控制。而且内边距和外边距的属性对div的位置也起到了很重要的影响。很多时候在布局定位的时候，这俩个元素起到关键作用。
   3.div形状：主要是宽度和高度的属性了。这个确定了这个div的外部表现出的大小。
   4.剩下的属性都是一些修饰属性，可以有选择的去考虑和设计。

3.js动态生成表格主体内容解读

1. 数据结构的统一
   在动态生成表结构的内容的时候，我们需要需要明确确定数据的结构。我个人通常用JSON形式的数据结构去做表格数据的填充对象。因为json形式的数据结构为key-value;所以在把数据填充进表格的时候，通常是匹配key在div某个特定的字段值，然后再把value值传到这个div中。

2. 表格主体结构的规律性
   因为很多时候，表格主体的结构和表头的结构一样或者类型。所以很多情况下是复制一份表头的结构，然后替换其中的值，或者动态的增加或修改表头结构没有的内容。原理是这样的。具体的实现，需要借助jquery的clone()函数，find()函数，和val()函数,html()函数等，需要对jquery的这几个函数有了解。
   过程就是: 复制一份表头的结构---->>>循环判断div上特定的属性的值是否跟json的key值相同，相同就替换其中的值，与其同时动态修改或增加结构，且赋值----->>>然后动态的拼接这样的结构字符串------>>>最后通过html()函数。动态的向表格主体里面写入内容。

3. 需要注意的方面，往表格主体写入内容的时候有很多方法，但是得清楚的知道jquery中每个添加内容元素的特性。不然很可能就会出问题。在这里我使用的是html()方法而不是使用append()方法。是因为html()方法每次都是重新生成的内容。append只是追加内容，如果想重新生成新的内容，需要去除原来的内容。逻辑可能会更复杂，各有各的用法，要选择适合自己的。