<body>
<script type="text/javascript">

/*
*上面的方法和你麻烦。
*既然操作的是表格，
*那么最方便的方式就是使用表格节点对象的方法。
*
*表格是由行组成。表格节点对象中insertRow方法就完成了创建行并添加的动作。
*
*行是有单元格组成。通过tr节点对象的insertCell来完成。
*/

function crtTable(){
var oTabNode = document.createElement("table");

oTabNode.setAttribute("id","tabid");

var rowVal = parseInt(document.getElementsByName("rownum")[0].value);
var colVal = parseInt(document.getElementsByName("celnum")[0].value);

for(var x=1;x<=rowVal;x++){
var oTrNode = oTabNode.insertRow();
for(var y =1;y<=colVal;y++){
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML = x+"---"+y;
}
}

//将表格节点添加到div中。
document.getElementsByTagName('div')[0].appendChild(oTabNode);
document.getElementsByName("crtBut")[0].disabled=true;
}

//删除行
function delRow(){

//获取表格对象
var oTabNode = document.getElementById("tabid");
if(oTabNode==null){
alert("表格不存在");
return;
}

//获取要删除的表格行数。
var rowVal = document.getElementsByName("delrow")[0].value;

if(rowVal>=1 && rowVal<= oTabNode.rows.length){
oTabNode.deleteRow(rowVal-1);
}else{
alert("要删除的行不存在");
}
}

//删除咧，其实就是删除每一行中同一位置的单元格。
function delCol(){
//获取表格对象
var oTabNode = document.getElementById("tabid");
if(oTabNode==null){
alert("表格不存在");
return;
}

//获取要删除的表格列数。
var colVal = document.getElementsByName("delcol")[0].value;

if(colVal>=1 && colVal<=oTabNode.rows[0].cells.length){

for(var x=0; x<oTabNode.rows.length; x++){

oTabNode.rows[x].deleteCell(colVal-1);

}

}else{
alert("要删除的列不存在");
}

}
</script>

<input type="button" value="创建表格" name="crtBut" onclick="crtTable()" />
行：<input type="text" name="rownum" />列：<input type="text" name="celnum"/>
<hr/>
<input type="text" name="delrow"/><input type="button" value="删除行" onclick="delRow()"/>
<input type="text" name="delcol"/><input type="button" value="删除列" onclick="delCol()"/>
<hr/>
<div></div>
</body>

示例-创建表格-指定行列&删除表格的行和列的更多相关文章

  1. python excel操作 练习-#操作单列 #操作A到C列 #操作1到3行 #指定一个范围遍历所有行和列 #获取所有行 #获取所有列

    ##操作单列#操作A到C列#操作1到3行#指定一个范围遍历所有行和列#获取所有行#获取所有列 #coding=utf-8 from openpyxl import Workbook wb=Workbo ...

  2. 【jQuery 冻结任意行列】冻结任意行和列的jQuery插件

    实现原理: 创建多个div,div之间通过css实现层叠,每个div放置当前表格的克隆.例如:需要行冻结时,创建存放冻结行表格的div,通过设置z-index属性和position属性,让冻结行表格在 ...

  3. PostgreSQL 删除表格

    PostgreSQL 使用 DROP TABLE 语句来删除表格,包含表格数据.规则.触发器等,所以删除表格要慎重,删除后所有信息就消失了. 语法 DROP TABLE 语法格式如下: DROP TA ...

  4. Python中pandas dataframe删除一行或一列：drop函数

    用法:DataFrame.drop(labels=None,axis=0, index=None, columns=None, inplace=False) 参数说明:labels 就是要删除的行列的 ...

  5. javascript动态创建表格：新增、删除行和列

    转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...

  6. C# 操作Word文本框——插入表格/读取表格/删除表格

    在文本框中,我们可以操作很多元素,如文本.图片.表格等,在本篇文章中将着重介绍如何插入表格到文本框,插入的表格我们可以对表格进行格式化操作来丰富表格内容.此外,对于文本框中的表格内容,我们也可以根据需 ...

  7. C# 实现对PPT插入、编辑、删除表格

    现代学习和办公当中,经常会接触到对表格的运用,像各种单据.报表.账户等等.在PPT演示文稿中同样不可避免的应用到各种数据表格.对于在PPT中插入表格,我发现了一个新方法,不过我用到了一款免费的.NET ...

  8. 数据字典的设计--3.首页添加删除表格（JS实现）

    页面效果: JS代码: 1.添加表格 function insertRows(){ //获取表格对象 var tb1 = $("#dictTbl"); var tempRow = ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. for的冒泡排序练习题

    这是一个冒泡排序的方法,请汲取其中的思想.有一组数: 1,2,3,4,5,6请将这组数用降序排列.我们可以将数组里面的数两两相比,如果第二个数比第一个数大,那么将第二个数值与第一个数值交换,然后让其循 ...

  2. OpenCV（5） 对比度和亮度

      公式: 两个参数 \alpha > 0 和 \beta 一般称作 增益 和 偏置 参数.我们往往用这两个参数来分别控制 对比度 和 亮度 .   #include "stdafx. ...

  3. COGS1752 [BOI2007]摩基亚Mokia（CDQ分治 + 二维前缀和 + 线段树）

    题目这么说的: 摩尔瓦多的移动电话公司摩基亚(Mokia)设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如“用户C的位置在哪?”的问题,精确到毫米.但其真正高科技之处在于,它 ...

  4. android项目 在签名打包遇到的问题

    我在签名打包前,build success  ,可以把程序安装在手机上 然后签名打包的时候,build fail  ,原因采用了release 版本,因此这个时候在gradule build 添加下面 ...

  5. uva-1339Ancient Cipher

    Ancient Roman empire had a strong government system with various departments, including a secret ser ...

  6. <构建之法>第十一章、十二章有感

    十一章:软件设计与实现 工作时要懂得平衡进度和质量.我一直有一个困扰:像我们团队这次做 男神女神配 社区交友网,我负责主页的设计及内容模块,有个队友负责网站的注册和登录模块,有个队友负责搜索模块,有个 ...

  7. Java 生产者模式 消费者模式

    // The standard idiom for calling the wait synchronized(sharedObject) { while(condition){ sharedObje ...

  8. [知识点]网络流之Dinic算法

    // 此博文为迁移而来,写于2015年2月6日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vrg4.html      ...

  9. HTML5与移动端web学习笔记

    HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 ...

  10. lsof在运维中的应用

    场景一:文件系统使用率很高,但是找不到具体哪个文件占用了空间 原因:在unix系统中,如果有两个进程同时使用一个文件,如果其中一个进程删除了这个文件,但是这个文件此刻不会正真被释放,一直要等待引用它的 ...