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. tcpdump-根据IP查看程序与服务都用了哪些端口

    tcpdump -i em1 -tttt src 116.3.248.157 and port ! 6869 -nn -i 指定端口 -tttt 附带时间戳 -nn 解析域名与端口信息 ####### ...

  2. 翻译记忆软件-塔多思TRADO经典教程_5

    TRADOS新手必读 共有篇贴子 TRADOS新手必读   译海撷英系列之软件漫谈之TRADOS新手必读 作者:苏任 我很喜欢到翻译中国网站上来四处看看,一开始主要是关心应用资料和软件,后来就对网友的 ...

  3. android google map v1 v2 v3 参考

    V1,V2已经不被推荐使用,谷歌强烈推荐使用V3. 本人在选择时着实纠结了良久,现在总结如下: 对于V1,现在已经申请不到API KEY了,所以不要使用这个版本.这个是网址:https://devel ...

  4. Java连接Oracle数据库示例

    1.数据库复用模块 package cn.jzy.database; import java.sql.Connection; import java.sql.DriverManager; import ...

  5. Electron 入门案例1

    1:package.json 通过npm init生成package.json文件,内容如下: { "name": "t02", "version&q ...

  6. eclipse 打包 apk 文件

    1.通过eclipse中的file ,点击Import 导入项目 2.选择Android 中的 Existing Android Code Into Workspace 3.通过 Brower 引入项 ...

  7. html中切记ID不能重复

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. 深入理解 Linux 内存管理

    1. 内存地址 以Intel的中央处理器为例,Linux 32位的系统中.物理内存的基本单位是字节(Byte),1个字节有8个二进制位. 每一个内存地址指向一个字节,内存地址加1后得到下一个字节的地址 ...

  9. win7,8,10取得|取消管理员权限

    取得: Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\runas]@=”管理员取得所有权”“NoWorkingDirec ...

  10. Springboot UT 引入某些类

    http://www.infoq.com/cn/articles/Unit-Testing-Complete-Integration-Testing-Begins https://segmentfau ...