js动态创建表格,删除行列的实例代码。

<!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>Js动态创建表格、删除行例-www.jbxue.com</title>

<link rel="stylesheet" href="tab.css" />

<script type="text/javascript" src="../Day26/doctool.js"></script>

<script type="text/javascript">

function createTab1()

{

    var tabNode = doc.createElement("table");

    var tbdNode = doc.createElement("tbody");

    var trNode = doc.createElement("tr");

    var tdNode = doc.createElement("td");

    var textNode = doc.createTextNode("单元格一");

    tdNode.appendChild(textNode);

    trNode.appendChild(tdNode);

    tbdNode.appendChild(trNode);

    tabNode.appendChild(tbdNode);

    byTag("div")[0].appendChild(tabNode);

}

function createTab()

{

    var tabNode = doc.createElement("table");

    //tabNode.id = "tabid";

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

    var row = byName("rownum")[0].value;

    var col = byName("colnum")[0].value;

    for(var x=1; x<=row; x++)

    {

        var trNode = tabNode.insertRow();

        for(var y=1; y<=col; y++)

        {

            var tdNode = trNode.insertCell();

            tdNode.innerHTML = x+"...."+y;

        }

    }

    byTag("div")[0].appendChild(tabNode);

    event.srcElement.disabled = true;

}

function delRow()

{

    var tabNode = byId("tabid");

    if(tabNode==null)

    {

        alert("表格不存在 ");

        return;

    }

    var rownum = byName("delrow")[0].value;

    if(rownum>0 && rownum<=tabNode.rows.length)

        tabNode.deleteRow(rownum-1);

    else

    {

        alert("删除的行不存在，学习数数很重要");

    }

}

function delCol()

{

    var tabNode = byId("tabid");

    if(tabNode==null)

    {

        alert("表格不存在 ");

        return;

    }

    var colnum = byName("delcol")[0].value;

    if(colnum>0 && colnum<=tabNode.rows[0].cells.length)

    {

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

        {

            tabNode.rows[x].deleteCell(colnum-1);

        }

    }

    else

    {

        alert("删除的列不存在");

    }

}

</script>

</head>

<body>

<!--

通过页面的按钮可以动态的创建一个表格。

-->

行：<input type="text" name="rownum" /><br />

列：<input type="text" name="colnum" /><br />

<input type="button" value="创建表格" onclick="createTab()" /><br />

<input type="text" name="delrow" />

<input type="button" value="删除行" onclick="delRow()" />

<br />

<input type="text" name="delcol" />

<input type="button" value="删除列" onclick="delCol()" />

<br />

<br />

<div>

</div>

</body>

</html>

js动态创建表格,删除行列的小例子的更多相关文章

  1. js动态创建和删除option

    1.动态创建select function createSelect(){           var mySelect = document.createElement("select&q ...

  2. js动态创建表格------Day59

    刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下.发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了... 前几天记录了动态的加入一 ...

  3. js动态创建表格

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. js动态创建表格方法

    window.onload = function(){ var table = document.createElement('table'); table.border = 1; table.wid ...

  5. 通过JS动态创建和删除HTML元素

    <script type="text/javascript" language="Javascript"> function InputOnBlur ...

  6. js动态添加和删除table的行例子

    <table id="table_report" class="table table-striped table-bordered table-hover&quo ...

  7. js 动态生成表格案例

    <1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th),   下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...

  8. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

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

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

随机推荐

  1. 经典，HTML5游戏，超级玛丽

    在线演示 在线演示 本地下载 这是一款使用HTML5开发的超级玛丽,有没有点儿时的记忆?长按向上键,可以跳的更高哦.如果你也喜欢可以当成休闲游戏,如果你是开发者,不防下载下来看看是如何生成的.

  2. Java从零开始学十五(继承)

    一.继承作用 继承使用复用以前的代码非常容易,能够大大的缩短开发周期,降低开发成本,同时增加程序的易维护性 继承使重一个类A能够直接使用另外一个类B的属性和方法的一种途径 类A可以有自己的属性和方法 ...

  3. [SQL]查询某一个字段在某一段时期数据库中使用到的记录

    有些时候我们常常须要哪里用到了一些表,又或者什么时候运行了某一个存储过程.整理出了在某段时期内数据库运行的sql查询.也能够查询到数据库中某些字段的存放处.非常好非常强大.希望能帮到大家~ SELEC ...

  4. sqlserver varchar转datate 加计算

    SELECT * from mconsumeinfo mo where CONVERT(Datetime, mo.financedate, 120)> dateadd(day,-180,getd ...

  5. rxvt-unicode配置

    我的urxvt配置文件如下 前缀可改为rxvt然后可以使用rxvt命令启动 -/.Xresources ! urxvt color set URxvt.multichar_encoding:utf-8 ...

  6. Ubuntu解压缩zip,tar,tar.gz,tar.bz2

    ZIP zip可能是目前使用得最多的文档压缩格式.它最大的优点就是在不同的操作系统平台,比如Linux, Windows以及Mac OS,上使用.缺点就是支持的压缩率不是很高,而tar.gz和tar. ...

  7. oracle卸载清除注册表(彻底卸载)

    用Oracle自带的卸载程序不能从根本上卸载Oracle,从而为下次的安装留下隐患,那么怎么才能完全卸载Oracle呢? 那就是直接注册表清除,步骤如下: . 开始->设置->控制面板-& ...

  8. python之poplib模块下载并解析邮件

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之poplib模块下载并解析邮件 #https://github.com/michaelliao ...

  9. PHP-PHP.INI常用配置详解

    variables_order: 假如为'GPCS'表示系统在定义PHP预定义变量时的顺序是GET,POST,COOKIES,SERVER, 此时$_ENV为空数组, 只要把'E'添加到'GPCS'后 ...

  10. .NET的多种事务处理

    Oracle 的事务操作,有时候想在批量操作数据集合的时候,执行一次失败,即为了避免数据异常,将所有的操作回滚..NET给我们提供了良好的事务操作,Oracle端也有事务操作,可以灵活使用,此处介绍. ...