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. 修复损坏的 shapefile

    一.SHP文件 Shapefile文件(简称SHP)作为ESRI一种经典的数据格式,被很多其他软件所支持,如CAD.MapGIS等,虽然也有一些限制(如无法进行拓扑分析.字段长度为10个字符等),但其 ...

  2. STL - 容器 - Deque

    Deque和Vector类似,只不过deque头尾都开放,能够在头尾进行快速插入和删除操作 DequeTest.cpp #include <iostream> #include <d ...

  3. NSURLSession 学习笔记

    NSURLSession 学习笔记 一:NSURLSession 类似之前的NSURLConnection, 可配置每个session的 cookie,证书等网络连接配置信息 NSURLSession ...

  4. Simple example

    This is a simple example showing a small window. Yet we can do a lot with this window. We can resize ...

  5. Nginx随笔

    1.用于代理与反代理,处理大量请求的工具. 2.主要有三大模块:handle.upstream.过滤模块.handle用于在nginx内部接到请求并进行处理的状况:upstream用于需要nginx接 ...

  6. EXCEPTION-TOMCAT

      CreateTime--2016年10月24日16:22:12Author:Marydon声明:异常类文章主要是记录了我遇到的异常信息及解决方案,解决方案大部分都是百度解决的,(这里只是针对我遇到 ...

  7. 微信小程序用户数据解密

    概述 通过微信web开发者工具创建登录,获取用户信息,发送至后台,进行用户数据解密 详细 代码下载:http://www.demodashi.com/demo/10705.html 一.准备工作 1. ...

  8. C-常用字符串操作函数详解

    //使用字符串操作应时刻注意字符串或者数组长度!!避免溢出!! 1. size_t strlen(char const *str); //计算字符串长度, 注意返回size_t类型的值, 即unsig ...

  9. HDUOJ----(2064)汉诺塔III

    汉诺塔III Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  10. HDUOJ -----免费馅饼

    免费馅饼 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submissi ...