js动态创建表格,删除行列的小例子


Posted in Javascript onJuly 20, 2013
<!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>无标题文档</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>
Javascript 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
js 浏览器事件介绍
Mar 30 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
js实现索引图片切换效果
Nov 21 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
Angular2之二级路由详解
Aug 31 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
JavaScript中setAttribute用法介绍
Jul 20 #Javascript
jquery动态添加删除div 具体实现
Jul 20 #Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 #Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 #Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 #Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 #Javascript
javascript判断非数字的简单例子
Jul 18 #Javascript
You might like
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
javascript创建对象、对象继承的实用方式详解
2016/03/08 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
python统计cpu利用率的方法
2015/06/02 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
如何利用python查找电脑文件
2018/04/27 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
六道php面试题附答案
2014/06/05 面试题
输入N,打印N*N矩阵
2012/02/20 面试题
党校自我鉴定范文
2013/10/02 职场文书
最新教师自我评价分享
2013/11/12 职场文书
实习心得体会
2014/01/02 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers