Javascript动态创建表格及删除行列的方法


Posted in Javascript onMay 15, 2015

本文实例讲述了Javascript动态创建表格及删除行列的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建表格(还能删除行列)</title>
<style type="text/css">
body,div
{
 margin:0;
 padding:0;
 font-size:14px;
}
table
{
 margin:0 auto;
}
td
{
 border:1px solid green;
 text-align:center;
}
</style>
<script type="text/javascript">
//动态创建表格
function createTable() {
  var divMain = document.getElementById("divMain");
  removeAllChild(divMain); //删除上次添加的表格
  var myTable = document.createElement("table");
  myTable.id = "DynamicTable";
  var myRow = document.getElementById("myRow").value;
  var myCol = document.getElementById("myCol").value;
  var trNode;
  var tdNode;
  var strTmp;
  for (var i = 1; i <= myRow; i++) {
    trNode = myTable.insertRow(-1);
    for (var j = 1; j <= myCol; j++) {
      strTmp ="第"+ i + "行,第"+ j + "列";
      tdNode = trNode.insertCell(-1);
      tdNode.innerHTML = "<a href='javascript:void(0);'>" + strTmp + "</a>";
    }
  }
  divMain.appendChild(myTable); //把表格添加到div中
  //event.srcElement.disabled = "true"; //添加按钮禁用
}
//删除指定节点下的所有子节点
function removeAllChild(nodeObj) {
  while (nodeObj.hasChildNodes()) {
    nodeObj.removeChild(nodeObj.firstChild);
  }
}
//删除行
function DeleteRow() {
  var rowNum = document.getElementById("delRow").value;
  var tbl = document.getElementById("DynamicTable");

  if (tbl == null) {
    alert('请先创建表格');
    return;
  }
  if ((rowNum <= tbl.rows.length) && (rowNum > 0)) {
    tbl.deleteRow(rowNum-1);
  }
  else {
    alert('请输入一个有效的行!');
  }
}
//删除列
function DeleteCol() {
  var colNum = document.getElementById("delCol").value;
  var tbl = document.getElementById("DynamicTable");
  if (tbl == null) {
    alert('请先创建表格');
    return;
  }
  if(tbl.rows.length<=0) {
    alert('表格不存在行');
    return;
  }
  if ((colNum <= tbl.rows[0].cells.length) && (colNum > 0)) {
    for (var i = 0; i < tbl.rows.length; i++) {
      tbl.rows[i].deleteCell(colNum - 1);
    }
  }
  else {
    alert('指定列不存在');
  }
}
</script>
</head>
<body>
请输入行数<input type="text" id="myRow" />,请输入列数
<input type="text" id="myCol" /><br />
<input type="button" value="创建表格" onclick="createTable()" /><br />
<input type="text" id="delRow" /><input type="button" value="删除行" 
onclick="DeleteRow()" /><br />
<input type="text" id="delCol" /><input type="button" value="删除列" 
onclick="DeleteCol()" /><br />
<div id="divMain">
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery animate 动画效果使用说明
Nov 04 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
jQuery中after的两种用法实例
Jul 03 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
深入理解Promise.all
Aug 08 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 Javascript
javascript制作的滑动图片菜单
May 15 #Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 #Javascript
javascript实现日期按月份加减
May 15 #Javascript
Javascript递归打印Document层次关系实例分析
May 15 #Javascript
Javascript节点关系实例分析
May 15 #Javascript
自己编写的支持Ajax验证的JS表单验证插件
May 15 #Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 #Javascript
You might like
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP简单遍历对象示例
2016/09/28 PHP
Javascript 强制类型转换函数
2009/05/17 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
javascript实现下雨效果
2017/03/27 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
印尼网上商店:Alfacart.com
2019/03/11 全球购物
2014村务公开实施方案
2014/02/25 职场文书
主办会计岗位职责
2014/03/13 职场文书
软环境建设心得体会
2014/09/09 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
JavaScript 反射学习技巧
2021/10/16 Javascript