在静态页面中,如果要显示表格,可以通过<table>标签以及<tr><td><th>等相互配合实现。
但是如果需要动态生成的话,则可以通过javascript脚本语言来实现。
在javascript实现前,首先需要明白的是:
最基本的表格可以说是几种标签以及标签中的数据组成
通过查阅相关的文档,可以知道在javascript的document对象中有两个方法:
(1)oElement =document.createElement(sTag);//为指定标签创建一个元素的实例。
可以通过该方法创建任意标签,如<table><tr><td><a><span>...,只需要将标签名传入即可,并获取该标签的实例对象(一定不能忘记tbody标签)
(2)oTextNode =document.createTextNode( [sText]); //从指定值中创建文本字符串。
可以通过该方法创建文本节点对象,并可以在创建时完成文本初始化
通过DOM的节点特征以及table节点对象本身的特点,可以归纳出两个基础的创建表格的方法:
方法一:
不断地通过document.createElement(sTag),以及document.createTextNode( [sText])创建标签节点以及文本节点,
并通过table、td、th等标签对象的appendChild()方法,将子节点添加到相应的父节点中,如此创建表格;
方法二:
通过document.createElement(sTag)创建table标签对象,如果通过table对象的insertRow()方法创建tr标签对象,通过tr标签的insertCell()方法创建td对象,再通过td对象的innerHTML或者innerText属性,或者追加文本节点的方法添加数据内容,如此创建表格;
最后一步
在创建好表格后,只有将其插入到页面的相应位置,才能显示出来,这是我们可以将其放置在指定标签的指定位置,一般获取到该标签对象后,通过其方法insertXXX()方法将table对象插入文档中,这是文档才能真正显示出来。
(别忘了给表格加样式)