Javascript_11_DOM_表格练习
来源：互联网 发布：cntv直播软件 编辑：程序博客网 时间：2024/06/08 19:21
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>DOM_表格练习</title> <style type="text/css"> a:link,a:visited{ color: blue; text-decoration: none; } a:hover{ color: red; } table{ border: #008FF0 dashed 1px; } table td{ border: #008FF0 dashed 1px; background-color: orange; } </style> </head> <body> <h1>DOM_表格练习</h1> <script type="text/javascript" src="a.js"> </script> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /* * 需求：删除前面创建的表格里的指定行、指定列 用到的table对象中deleteRow(index)方法，下标从0开始 表格中其实并没有列的概念，而是将每一行的某个单元格全删除 */ <script type="text/javascript"> function deleteCol_1(){ //由于表格没有列的概念，所以将每一行的某个单元格全删除 var oTable=document.getElementById("tab_id_1"); var colNum=parseInt(document.getElementsByName("del_col")[0].value); if (oTable==null || oTable.rows.length<1) { alert("表格未创建！"); return; } //oTable.rows[0].cells.length代表第1行的单元格集合的数目 if (colNum>=1 && colNum<=oTable.rows[0].cells.length) { //遍历每一行，删除index-1的单元格 for (var i=0; i < oTable.rows.length; i++) { oTable.rows[i].deleteCell(colNum-1); } } else{ alert("要删除的列不存在！"); } } function deleteRow_1(){ //创建表格的最后一句设置了表格的ID var oTable=document.getElementById("tab_id_1"); //alert(oTable.nodeName);如果存在TABLE,否则报错找不到对象 if (oTable==null) { alert("表格未创建！"); return; } //第2步，获取要删除的行数 var rowNum=parseInt(document.getElementsByName("del_row")[0].value); //第3步，删除前判断健壮性 if (rowNum>=1 && rowNum<=oTable.rows.length) { oTable.deleteRow(rowNum-1);//记得减1，因为下标是从0开始算 } else{ alert("要删除的行不存在！"); } } </script> 删除行：<input type="text" name="del_row"/> 删除列：<input type="text" name="del_col"/> <input type="button" value="删除行" onclick="deleteRow_1()"/> <input type="button" value="删除列" onclick="deleteCol_1()"/> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝我是分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ /* * 需求：创建指定行列的表格 插入一句：给表格设置ID的两种方法： oTable.id="tab_id_1"; oTable.setAttribute("id","tab_id_1"); */ <script type="text/javascript"> function creatTab_4(){ //改进版本：根据文本框获得行、列数目 var rows=parseInt(document.getElementsByName("tab_row")[0].value); var cols=parseInt(document.getElementsByName("tab_col")[0].value); var oTable=document.createElement("table"); for (var i=1; i <=rows; i++) { var oTr=oTable.insertRow(); for (var j=1; j <= cols; j++) { var oTd=oTr.insertCell(); oTd.innerHTML="单元格_"+i+"行"+j+"列"; } } var oDiv=document.getElementById("div_id_1"); oDiv.appendChild(oTable); document.getElementsByName("btn_1")[0].disabled=true; // 插入一句：给表格设置ID的两种方法： oTable.id="tab_id_1"; oTable.setAttribute("id","tab_id_1"); } function creatTab_3(){ //双层循环就可实现指定行列的表格了 //table对象的insertRow方法 //insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中。 //tr对象的insertCell方法 //insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。 var oTable=document.createElement("table"); //不用再创建tbody了？？？ for (var i=0; i < 5; i++) { var oTr=oTable.insertRow(); for (var j=0; j < 6; j++) { var oTd=oTr.insertCell(); oTd.innerHTML="单元格_"+i+"行"+j+"列"; } } //添加到文档div里 var oDiv=document.getElementById("div_id_1"); oDiv.appendChild(oTable); //创建好了之后，将按钮禁用 document.getElementsByName("btn_1")[0].disabled=true; } function creatTab_2(){ //方法1太过麻烦，使用方法2 //table对象的insertRow方法 //insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中。 //tr对象的insertCell方法 //insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。 var oTable=document.createElement("table"); //不用再创建tbody了？？？ var oTr=oTable.insertRow(); var oTd=oTr.insertCell(); oTd.innerHTML="单元格_1"; //添加到文档div里 var oDiv=document.getElementById("div_id_1"); oDiv.appendChild(oTable); } function creatTab_1(){ //方法1：用creatElement（“TagName”）方法创建表格 //oElement = document.createElement(sTag); var oTable=document.createElement("table"); var oTbody=document.createElement("tbody"); var oTr=document.createElement("tr"); var oTd=document.createElement("td"); //让它们之间产生关系appendChild oTr.appendChild(oTd); oTbody.appendChild(oTr); oTable.appendChild(oTbody); //添加到文档div里 var oDiv=document.getElementById("div_id_1"); oDiv.appendChild(oTable); } </script> 行：<input type="text" name="tab_row" /> 列：<input type="text" name="tab_col" /> <input type="button" value="创建表格1" onclick="creatTab_4()" name="btn_1"/> <hr /> <div id="div_id_1"></div> </body></html>
