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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
jquery 指南/入门基础
Nov 30 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
JS写滑稽笑脸运动效果
May 28 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
杏林同学录(五)
2006/10/09 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
javascript 函数参数限制说明
2010/11/19 Javascript
JavaScript中的类继承
2010/11/25 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
pandas多级分组实现排序的方法
2018/04/20 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python制作图片缩略图
2019/04/30 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
德国家具在线:Fashion For Home
2017/03/11 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
大专自我鉴定范文
2013/10/23 职场文书
岗位职责风险点
2014/03/12 职场文书
入股协议书范本
2014/04/14 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
深度学习tensorflow基础mnist
2021/04/14 Python