Javascript_11_DOM_表格练习<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>