dom实际操作报表示例(dom建立报表)

1、应用HTML标识建立报表:


拷贝编码
编码以下:

<tableborder="1"width="300">
<caption>人员表</caption>
<thead>
<tr>
<th>名字</th>
<th>性別</th>
<th>年纪</th>
</tr>
</thead>
<tbody>
<tr>
<td>张3</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>李4</td>
<td>女</td>
<td>22</td>
</tr>
</tbody>
<tfoot>
<tr>
<tdcolspan="3">累计:N</td>
</tr>
</tfoot>
</table>

thead、tfoot、caption标识在1个报表中只能有1个tbody、tr、td、th标识在1个报表中能够有N个

2、应用DOM建立报表

<table>标识是HTML中构造最为繁杂的1个,大家能够根据DOM来建立转化成它,或HTMLDOM来实际操作它。(HTMLDOM出示了更为便捷便捷的方法来实际操作HTML)


拷贝编码
编码以下:

<script>
window.onload=function(){
vartable=document.createElement("table");
//给报表加上特性
table.width=300;//还能够应用这类方式:table.setAttribute('width',300)
table.border=1;</p> <p>//建立报表的题目
varcaption=document.createElement("caption");
table.appendChild(caption);</p> <p>//给报表的题目加上內容
//caption.innerHTML="人员表";//非W3c规范的方式
varcaptionText=document.createTextNode("人员表");
caption.appendChild(captionText);</p> <p>
//建立报表的第1行,是个题目行
varthead=document.createElement("thead");
table.appendChild(thead);</p> <p>vartr=document.createElement("tr");
thead.appendChild(tr);</p> <p>//列
varth1=document.createElement("th");
tr.appendChild(th1);
th1.innerHTML="数据信息";
varth2=document.createElement("th");
tr.appendChild(th2);
th2.innerHTML="数据信息";</p> <p>document.body.appendChild(table);
};
</script>

3、应用DOM获得报表数据信息(应用DOM实际操作报表会很烦)

拷贝编码
编码以下:

window.onload=function(){
vartable=document.getElementsByTagName("table")[0];
alert(table.children[0].innerHTML);
};

4、应用HTMLDOM来获得报表数据信息(便捷,简易,清楚)。

由于报表较为复杂,层级也多,在应用以前所学习培训的DOM只是来获得某个元素会十分难受,因此应用HTMLDOM会清楚许多。


拷贝编码
编码以下:

window.onload=function(){
//应用HTMLDOM来获得报表元素
vartable=document.getElementsByTagName('table')[0];//获得table引入
//按HTMLDOM来获得报表的<caption>
alert(table.caption.innerHTML);//获得caption的內容
//table.caption.innerHTML="学员表";//还能够设定值
};


拷贝编码
编码以下:

window.onload=function(){
//应用HTMLDOM来获得报表元素
vartable=document.getElementsByTagName('table')[0];//获得table引入
//按HTMLDOM来获得表头表尾<thead>、<tfoot>
alert(table.tHead);//获得表头
alert(table.tFoot);//获得表尾</p> <p>//按HTMLDOM来获得表体<tbody>
alert(table.tBodies);//获得表体的结合
};

在1个报表中<thead>和<tfoot>是唯1的,只能有1个。而<tbody>并不是唯1的能够有好几个,这样致使最终回到的<thead>和<tfoot>是元素引入,而<tbody>回到的是元素结合。


拷贝编码
编码以下:

window.onload=function(){
//应用HTMLDOM来获得报表元素
vartable=document.getElementsByTagName('table')[0];//获得table引入
//按HTMLDOM来获得报表的行数
alert(table.rows.length);//获得行数的结合,数量</p> <p>//按HTMLDOM来获得报表行为主体里的行数
alert(table.tBodies[0].rows.length);//获得行为主体的行数的结合,数量
};


拷贝编码
编码以下:

window.onload=function(){
//应用HTMLDOM来获得报表元素
vartable=document.getElementsByTagName('table')[0];//获得table引入</p> <p>//按HTMLDOM来获得报表行为主体内第1行的模块格数量(tr)
alert(table.tBodies[0].rows[0].cells.length);//获得第1行模块格的数量
};


拷贝编码
编码以下:

window.onload=function(){
//应用HTMLDOM来获得报表元素
vartable=document.getElementsByTagName('table')[0];//获得table引入</p> <p>//按HTMLDOM来获得报表行为主体内第1行第1个模块格的內容(td)
alert(table.tBodies[0].rows[0].cells[0].innerHTML);//获得第1行第1个模块格的內容
};


拷贝编码
编码以下:

<script>
window.onload=function(){
//应用HTMLDOM来获得报表元素
vartable=document.getElementsByTagName('table')[0];//获得table引入</p> <p>//按HTMLDOM来删掉题目、表头、表尾、行、模块格
//table.deleteCaption();//删掉题目
//table.deleteTHead();//删掉<thead>
//table.tBodies[0].deleteRow(0);//删掉<tr>1行
//table.tBodies[0].rows[0].deleteCell(0);//删掉<td>1个模块格
//table.tBodies[0].rows[0].deleteCell(1);//删掉1个模块格中的內容,非常于删掉掉1个模块格,后边的希望会补进
};
</script>

5、HTMLDOM建立报表


拷贝编码
编码以下:

window.onload=function(){
//按HTMLDOM建立1个报表
vartable=document.createElement('table');
table.border=1;
table.width=300;</p> <p>table.createCaption().innerHTML='人员表';</p> <p>//table.createTHead();
//table.tHead.insertRow(0);
varthead=table.createTHead();//该方式回到1个引入
vartr=thead.insertRow(0);//该方式回到1个引入</p> <p>vartd=tr.insertCell(0);
//td.appendChild(document.createTextNode('数据信息'));//加上数据信息的1种方法,还能够应用下面种方法
td.innerHTML="数据信息";
vartd2=tr.insertCell(1);
//td2.appendChild(document.createTextNode('数据信息2'));
td2.innerHTML="数据信息2";</p> <p>document.body.appendChild(table);
};在建立报表的情况下<table>、<tbody>、<th>沒有特殊的方式,必须应用document来建立。还可以仿真模拟已有的方式撰写特殊的涵数便可,比如:insertTH()之类的。