DHTML(Dynamic HTML)--1表格的增删改

来源：互联网发布：淘宝网拍编辑：程序博客网时间：2024/06/04 00:29

利用DHTML中提供的一些方法来进行表格的增删改
1.table对象中的方法
createCaption 在表格中创建空的 caption 元素。
createTFoot 在表格中创建空的 tFoot 元素。
createTHead 在表格中创建空的 tHead 元素。
eleteCaption 从表格中删除 caption 元素及其内容。

##deleteRow 从表格及 rows 集合中删除指定行(tr)。

deleteTFoot 从表格中删除 tFoot 元素及其内容。

deleteTHead 从表格中删除 tHead 元素及其内容。

##insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中。

table对象中的集合:

##cells 获取表格行或整个表格中所有单元格的集合。
##rows 获取来自于 table 对象的 tr (表格行)对象的集合。
2.tr对象中的方法

##deleteCell从表格行及 cells 集合中删除指定单元格(td)。

##insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。

tr对象中的集合

##cells 获取表格行或整个表格中所有单元格的集合。

下面使用上诉函数演示一下对表格操作:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><link rel="stylesheet" href="css/table.css"><script type="text/javascript">function clearErrorInfo(){//清空错误信息document.getElementById("errorInfo").innerHTML="";}function createTable(){//首先清空div中的信息document.getElementById("div1").innerText="";//创建表格之前,先校验数据是否正确var rowInputNode=document.getElementsByName("rowNum")[0];if(!check(rowInputNode,"行号")){return;}var colInputNode=document.getElementsByName("colNum")[0];if(!check(colInputNode,"列号")){return;}//程序运行到此处说明,格式没有问题,下面开始创建表格var oTableNode=document.createElement("table");var sRowValue=rowInputNode.value;var rowValue=parseInt(sRowValue);//行号var sColValue=colInputNode.value;var colValue=parseInt(sColValue);//列号for(var i=0;i<rowValue;i++){var oTr=oTableNode.insertRow();for(var j=0;j<colValue;j++){var oTd=oTr.insertCell();oTd.innerHTML="单元格"+(i+1)+"-"+(j+1);}}oTableNode.id="table1";//给创建的表格,设置1个id方便后面对表格进行删除操作//把创建的表格加到div标签中document.getElementById("div1").appendChild(oTableNode);}function check(obj,str){var sValue=obj.value;var value = parseInt(sValue);if(isNaN(value) || value<=0){document.getElementById("errorInfo").innerHTML=(str+"格式错误:"+sValue).fontsize(8).fontcolor("red");return false;}return true;}</script></head><body>行号:<input type="text" name="rowNum" onfocus="clearErrorInfo();" onblur="check(this,'行号');">列号:<input type="text" name="colNum" onfocus="clearErrorInfo();" onblur="check(this,'列号');"><input type="button" value="创建表格" onclick="createTable();"> <span id="errorInfo"></span><br/>行号:<input type="text" name="rowNum2" onfocus="clearErrorInfo2();" onblur="check2(this,'行号');"><input type="button" value="删除行" onclick="deleteRow();"> <span id="errorInfo2"></span>  <br/>列号:<input type="text" name="colNum2" onfocus="clearErrorInfo3();" onblur="check3(this,'列号');"><input type="button" value="删除列" onclick="deleteCol();"> <span id="errorInfo3"></span>  <br/><input type="button" value="删除单元格" onclick="deleteCell();">  <br/><div id="div1"></div><script type="text/javascript">function clearErrorInfo2(){//清空错误信息document.getElementById("errorInfo2").innerHTML="";}function clearErrorInfo3(){//清空错误信息document.getElementById("errorInfo3").innerHTML="";}function check2(obj,str){var sValue=obj.value;var value = parseInt(sValue);if(isNaN(value) || value<=0){document.getElementById("errorInfo2").innerHTML=(str+"格式错误:"+sValue).fontsize(8).fontcolor("red");return false;}return true;}function check3(obj,str){var sValue=obj.value;var value = parseInt(sValue);if(isNaN(value) || value<=0){document.getElementById("errorInfo3").innerHTML=(str+"格式错误:"+sValue).fontsize(8).fontcolor("red");return false;}return true;}function deleteRow(){//防护var rowDelNode=document.getElementsByName("rowNum2")[0];var rowValue=rowDelNode.value;if(!check2(rowDelNode, "行号")){return;}var oTableNode=document.getElementById("table1");if(rowValue>oTableNode.rows.length){alert("行数输入多于表格行数");return;}//删除oTableNode.deleteRow(rowValue-1);}function deleteCol(){//防护var colDelNode=document.getElementsByName("colNum2")[0];var colValue=colDelNode.value;if(!check3(colDelNode, "列号")){return;}var oTableNode=document.getElementById("table1");if(colValue>oTableNode.rows[0].cells.length){alert("列数输入多于表格列数");return;}//删除列:遍历每一行,删除每行中对应的单元格for(var i=0;i<oTableNode.rows.length;i++){var oTr=oTableNode.rows[i];oTr.deleteCell(colValue-1);}}function deleteCell(){//防护var rowDelNode=document.getElementsByName("rowNum2")[0];var rowValue=rowDelNode.value;if(!check2(rowDelNode, "行号")){return;}var colDelNode=document.getElementsByName("colNum2")[0];var colValue=colDelNode.value;if(!check3(colDelNode, "列号")){return;}var oTableNode=document.getElementById("table1");if(rowValue>oTableNode.rows.length){alert("行数输入多于表格行数");return;}if(colValue>oTableNode.rows[0].cells.length){alert("列数输入多于表格列数");return;}//删除一个单元格:oTableNode.rows[rowValue-1].deleteCell(colValue-1);}</script></body></html>

阅读全文

1 0