<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. DOM系列---基础篇

    DOM系列---基础篇   DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树, ...

  2. Console.log，Window.alert，Document.write三者区别

    1.Console.log不会阻断程序继续进行,在控制台可以看到测试结果. 2.Window.alert弹出框会阻断程序运行,在弹出框可以看到测试结果. 3.Document.write不会阻断程序继 ...

  3. node入门 express ejs

    hello.js var express = require("express"); var app = express(); app.get("/hello" ...

  4. JS 中面向对象的5种写法

    //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { ...

  5. AC自动机+全概率+记忆化DP UVA 11468 Substring

    题目传送门 题意:训练指南P217 分析:没有模板串也就是在自动机上走L步,不走到val[u] == v的节点的概率 PS:边读边insert WA了,有毒啊! #include <bits/s ...

  6. TFS安装与管理

    整了几天TFS,把相关的一些配置与安装的要点简单记下,希望对大家有用.本篇主要是安装与配置上的内容,下一篇会介绍如何使用以及使用方面的相关心得体会. 本篇内容简要: 1.   安装部署 1.1.  流 ...

  7. RColorBrewer包---R语言的配色方案

    // RColorBrewer包介绍 RColorBrewer包提供了3套很好的配色方案.用户只需要指定配色方案的名称,就可以用包中的brewer.pal()函数生成颜色.这3套配色方案包括: 连续型 ...

  8. linux中用shell获取时间,日期

    linux中用shell获取昨天.明天或多天前的日期:在Linux中对man date -d 参数说的比较模糊,以下举例进一步说明:# -d, --date=STRING display time d ...

  9. 【POJ】3744 Scout YYF I

    http://poj.org/problem?id=3744 题意:直线上n个地雷,n<=10,范围在[1, 100000000],每一次有p的概率向前走一步,1-p的概率向前走两步,问安全通过 ...

  10. BZOJ4184: shallot

    Description 小苗去市场上买了一捆小葱苗,她突然一时兴起,于是她在每颗小葱苗上写上一个数字,然后把小葱叫过来玩游戏. 每个时刻她会给小葱一颗小葱苗或者是从小葱手里拿走一颗小葱苗,并且 让小葱 ...