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. Nginx学习笔记（三）------配置文件nginx.conf说明

    #user nobody; #开启进程数 <=CPU数  worker_processes ; #错误日志保存位置 #error_log logs/error.log; #error_log l ...

  2. mac 终端 使用 solarized 主题设置语法高亮

    mac 终端 使用 solarized 主题设置语法高亮 先来看看 solarized 在 mac 终端上的效果图片 一:先下载 solarized 官网下载:https://github.com/a ...

  3. Android入门之简单拨号器

    效果图: package jk.phone; import android.net.Uri; import android.os.Bundle; import android.app.Activity ...

  4. sso单点登录系统原理与实现

    sso单点登录 1.认识并理解sso及其应用,并能根据其实现原理自行实现sso 没有使用sso单点登录的系统用户再访问同一个系统的不同模块都必须的登录 使用sso单点登录,用户只需要登录一次,并且可以 ...

  5. linux上安装BeatifulSoup(第三方python库)

    1. 什么是beatifulsoup? beatifulsoup官网http://www.crummy.com/software/BeautifulSoup/ BeatifulSoup是用Python ...

  6. mac 安装升级python3

    如果没有安装过python3的话那就直接下载dmg文件安装升级,一般下载安装后的路径为 /Library/Frameworks/Python.framework/Versions 如果同时安装了多个p ...

  7. IntelliJ IDEA 注册码失效

    破解补丁无需使用注册码,下载地址:http://idea.lanyus.com/jar/JetbrainsCrack-2.6.2.jar idea14 keygen下载地址:http://idea.l ...

  8. 分离Command

    要点: 1.请求类必须继承CommandBase 2.请求类类名为请求对象中的Key值,大小写可以不区分 3.类必须用public修饰,否则无法识别该请求,提示为无效请求 4.不能再调用NewRequ ...

  9. mysql利用yum安装指定数据存放路径

    测试环境: Centos6.5.MySQL5.6.28 yum安装具有速度快,便捷关键是不用编译,编译时间太久了! 01.下载mysql https://mirrors.tuna.tsinghua.e ...

  10. 实战：INNOBACKUPEX for mysql 5.6自己主动备份脚本

    #backup.sh #!/bin/sh # # 第一次运行它的时候它会检查是否有全然备份,否则先创建一个全库备份 # 当你再次执行它的时候.它会依据脚本中的设定来基于之前的全库备份进行增量备份 #o ...