<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script>
//创建table
function createTable(){
var tab = document.createElement('table');
tab.border = 1;
tab.id = 'mtab';
var caption = tab.createCaption();
caption.innerHTML = 'helle';

for(var i = 0;i<5;i++){
var tr = tab.insertRow(i);
for(var j=0;j<4;j++){
var td = tr.insertCell(j);
td.innerHTML = ''+i+j;
}
}

document.getElementById('test').appendChild(tab);
}

//删除行
function deleterow(){
var tab = document.getElementById('mtab');
if(tab.rows.length > 0){
tab.deleteRow(tab.rows.length - 1);
}
}

//删除列
function deletecell(){
var tab = document.getElementById('mtab');
var row = tab.rows[tab.rows.length - 1];
if(row.cells.length > 0){
row.deleteCell(row.cells.length -1);
}
}

</script>
</head>

<body id="test">
<button value="1" onclick="createTable()">createTable</button><br />
<button value="2" onclick="deleterow()">deleterow</button><br />
<button value="3" onclick="deletecell()">deletecell</button><br />
<hr />
</body>

</html>

DOM增删操作（创建删除表格）的更多相关文章

  1. DOM增删操作（select动态增加和删除以及清空）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  2. [No000005]C#注册表操作,创建,删除,修改,判断节点是否存在

    //用.NET下托管语言C#操作注册表,主要内容包括:注册表项的创建,打开与删除.键值的创建(设置值.修改),读取和删除.判断注册表项是否存在.判断键值是否存在. //准备工作: //1:要操作注册表 ...

  3. js基础：对DOM进行操作，删除、添加元素

    <body> <div id="div1"> <p id="p1">第一段</p> <p id=" ...

  4. c# 注册表操作,创建,删除,修改,判断节点是否存在

    用.NET下托管语言C#操作注册表,主要内容包括:注册表项的创建,打开与删除.键值的创建(设置值.修改),读取和 删除.判断注册表项是否存在.判断键值是否存在. 准备工作: 1:要操作注册表,我们必须 ...

  5. Day19-File操作-创建 删除，文件过滤

    import java.io.File; import java.io.IOException; /* *创建功能: *public boolean createNewFile():创建文件 如果存在 ...

  6. 高效率http页面优化法则一【JS对DOM的操作】

    高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...

  7. JS对DOM的操作优化法则

    html页面显示过程 解析HTML,并生成一棵DOM tree 解析各种样式并结合DOM tree生成一棵Render tree 对Render tree的各个节点计算布局信息,比如box的位置与尺寸 ...

  8. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  9. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

随机推荐

  1. jvm高级特性(4)(内存分配回收策略）

    JVM高级特性与实践(四):内存分配 与 回收策略 一. 内存分配 和 回收策略 1,对象内存分配的概念: 往大方向讲,它就是在堆上分配(但也可能经过JIT编译后被拆散为标量类型并间接地栈上分配), ...

  2. 奇怪的Java题：为什么1000 == 1000返回为False，而100 == 100会返回为True?

    如果你运行如下代码: 1 2 3 4 Integer a = 1000, b = 1000;  System.out.println(a == b);//1 Integer c = 100, d =  ...

  3. mysql层的内存分配

    参考 http://www.cnblogs.com/justfortaste/p/3198406.html http://m.blog.csdn.net/blog/IT_PCode/17007833 ...

  4. POJ 1083

    #include<iostream> #include<stdio.h> #include<algorithm> #define MAXN 400 using na ...

  5. Android Library项目发布到JCenter最简单的配置方法

    前沿 网上的步骤看起来实在太麻烦,gituhb上偶然间看到的一个项目,经过实际验证确实可行.github连接:https://github.com/xiaopansky/android-library ...

  6. 读取Java注解类型

    参考文章: (1)https://www.cnblogs.com/extjs4/p/6411507.html 关于注解第一篇 (2)https://www.cnblogs.com/extjs4/p/6 ...

  7. ActiveMQ HelloWorld入门

    在P2P的消息模型中,双方通过队列交流,一个队列只有一个生产者和一个消费者.a.消息生产者 package com.ljq.durian.test.activemq; import javax.jms ...

  8. 修改MVC默认的pageBaseType以添加功能

    试想下在MVC的前端页面JS或者html中需要使用多语言,而后端的多语言是维护在资源文件中的,前端如果使用的话需要使用AJAX频繁的获取,一个页面中可能会存在大量的需要语言转换的地方,频繁使用AJAX ...

  9. PowerDesigner中利用数据库表反向生成PDM（jdk必须是32位）

    第一步:创建一个空的PDM模型(选择对应的DBMS):File-->New 第二步:选择DataBase-->Configure Connections,配置即将连接的数据库 第三步:选择 ...

  10. php的ajax简单实例

    很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈. 为了防止我自己忘记,现在把这个简单的实例记录下.这个实例是网上搜的,文末附上链接. 首先你得有自己的服务器 ...