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 相关文章推荐
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
JS实现日期加减的方法
Nov 29 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
javascript获取元素的计算样式
May 24 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
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
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php遍历CSV类实例
2015/04/14 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
Python是编译运行的验证方法
2015/01/30 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
django Serializer序列化使用方法详解
2018/10/16 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
python3 xpath和requests应用详解
2020/03/06 Python
python小白学习包管理器pip安装
2020/06/09 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
自主招生自荐信
2013/12/08 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
领导干部考核评语
2015/01/04 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python
如何基于python实现单目三维重建详解
2022/06/25 Python