DHTML(Dynamic HTML)--1表格的增删改
2017-08-31 23:53
465 查看
利用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 获取表格行或整个表格中所有单元格的集合。
下面使用上诉函数演示一下对表格操作:
代码:
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- DHTML(Dynamic HTML)--5.select下拉框
- DHTML(Dynamic HTML)--2使用ul 制作列表菜单
- DHTML是dynamic HTML短语的缩写，即动态HTML
- DHTML(Dynamic HTML)--4.表单(form)的校验与提交
- JS对HTML表格进行增删改操作
- html页面表格导出到excel总结
- html用图片加表格组装圆角列表框
- 通达OA 小飞鱼工作流在线培训教程（二）HTML表格基础
- HTML笔记（三）bootstrap之表格
- HTML（8）表格
- HTML表格标签用法
- html的body内标签之图片及表格
- HTML_3th_表格
- [Cocoa-4th] Chapter6 - NSTableView表格增删改 （详尽介绍2）
- codeigniter html表格
- HTML&CSS基础篇之十五：表格&列表
- HTML_表格实例
- 动态创建表格js文件,javascript，Ajax，DHTML动态实现表格的创建，动态读取XML中的文件，读取dom节点的例子。
- html列表、表格、超链、字体标签————web前端分享2
- html页面表格导出到excel总结