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 相关文章推荐
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
js初始化验证实例详解
Nov 26 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php 高性能书写
2010/12/11 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
微信小程序 picker-view 组件详解及简单实例
2017/01/10 Javascript
layui导航栏实现代码
2017/05/19 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
Numpy的简单用法小结
2019/08/28 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
Python while循环使用else语句代码实例
2020/02/07 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
python eventlet绿化和patch原理
2020/11/21 Python
使用phonegap克隆和删除联系人的实现方法
2017/03/31 HTML / CSS
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
小学生美德少年事迹
2014/02/02 职场文书
供货协议书
2014/04/22 职场文书
设备售后服务承诺书
2014/05/30 职场文书
联片教研活动总结
2014/07/01 职场文书
群教班子对照检查材料
2014/08/26 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
师范生小学见习总结
2015/06/23 职场文书
python中urllib包的网络请求教程
2022/04/19 Python