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. poj 2135 (基础费用流)

    题意:从1到n再到1,每条边只能走一次,求最短距离. 建图:每条边只能走一次就是流量是1,添加源点与1相连,容量为2,费用为0,n与汇点相连容量为2,费用为0: 求增广路用SPFA最短路求,, #in ...

  2. 高可用性(HA) 4 - network bonding

    我们都知道,hadoop namenode是一个臭名昭著的单点故障点(SPOF). 当你找到一篇High  Availability的文章, 以为使用heartbeat/pacemaker, coro ...

  3. E信通项目总结[转]

    http://ucd.leju.com/index.php/ouba2/    

  4. Java 类型, Hibernate 映射类型及 SQL 类型之间的相应关系

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  5. python3安装Beautiful Soup爬虫组件

    第一步:下载beautifulsoup4-4.3.2.tar.gz 第二步:拷贝解压缩目录到C:\Python34\beautifulsoup4-4.3.2 第三步: 第四步: 第五步:拷贝C:\Py ...

  6. java程序员认证考试题库

    第一部分 基础知识练习 目标 本章对应于<学生指南>各章的内容分别提供了练习题集,包括: ●  第一章Java入门 ●  第二章数据类型和运算符 ●  第三章流程控制与数组 ●  第四章封 ...

  7. eclispe Missing artifact...

      eclispe Missing artifact... CreateTime--2018年4月24日18:47:21 Author:Marydon 1.情景再现 eclipse pom.xml报错 ...

  8. TRIZ系列-创新原理-25-自服务原理

    自服务原理的详细表述例如以下:1)物体在实施辅助和维修操作时.必须能自我服务:2)利用废弃的材料和能量: 自服务原理的第1)个比較好理解,假设一个系统在执行过程中须要进行辅助和维护操作时,最好不要借助 ...

  9. Web服务器（容器）请求常见的错误及其解决方法

    首先我们来看看容器如何找到service()方法?(1)当在浏览器中输入 http://localhost:8080/firstweb/sayHi 这个地址后,容器是如何找到 HelloServlet ...

  10. JDBC实例--JDBC连接池技术解密，连接池对我们不再陌生

    一.为什么我们要用连接池技术? 前面的数据库连接的建立及关闭资源的方法有些缺陷.统舱传统数据库访问方式:一次数据库访问对应一个物理连接,每次操作数据库都要打开.关闭该物理连接, 系统性能严重受损. 解 ...