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 相关文章推荐
取选中的radio的值
Jan 11 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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
3种php生成唯一id的方法
2015/11/23 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
javascript 解析url的search方法
2010/02/09 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
vue实现选中效果
2020/10/07 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
Python探索之ModelForm代码详解
2017/10/26 Python
python实现神经网络感知器算法
2017/12/20 Python
python定时关机小脚本
2018/06/20 Python
详解python中的Turtle函数库
2018/11/19 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
优秀党支部事迹材料
2014/01/14 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书