脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js动态创建表格,删除行列

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

 更新时间：2013年07月20日 16:05:25   作者：  
这篇文章介绍了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>无标题文档</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常用函数（2）

    javascript常用函数（2）

    这篇文章主要介绍了javascript常用函数，再来15个常用函数，都具有很高的实用性，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • uniapp 使用定位示例详解

    uniapp 使用定位示例详解

    这篇文章主要为大家介绍了uniapp如何使用定位过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • js从Cookies里面取值的简单实现

    js从Cookies里面取值的简单实现

    遇到一个Js从Cookies里面取值的需求，Js貌似没有现成的方法可以指定Key值获取Cookie里面对应的值，简单实现如下
    2014-06-06
  • 三种方式实现瀑布流布局

    三种方式实现瀑布流布局

    本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • JavaScript 图片放大镜（可拖放、缩放效果）

    JavaScript 图片放大镜（可拖放、缩放效果）

    背景：很久之前就在marry5.com看到这个效果，当时觉得很神奇，碍于水平有限，没做出来。
    2008-09-09
  • 15个高级前端开发小技巧总结分享

    15个高级前端开发小技巧总结分享

    这篇文章主要介绍了15种不依赖JavaScript的高级Web开发技术,涵盖了从响应式排版到图像延迟加载的各个方面,展示了现代HTML和CSS的强大功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-11-11
  • Javascript中call与apply的学习笔记

    Javascript中call与apply的学习笔记

    经常看到这俩哥们，看来看去都是讲他们的区别，一直没搞太清楚作用究竟是什么，现在记录下自己理解，有错的话希望指出！
    2014-09-09
  • javascript 单例模式详解及简单实例

    javascript 单例模式详解及简单实例

    这篇文章主要介绍了javascript 单例模式详解及简单实例的相关资料,需要的朋友可以参考下
    2017-02-02
  • wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

    wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析

    本文给大家带来的是一款非常不错的富文本编辑器WangEditor，他最大的特点是它在ie6,7,8上都可以做到失去焦点后仍然可以在原位置插入图片，而且代码量很少，下面我们就来分析下他是如何实现的呢
    2015-05-05
  • uniapp中常用的事件处理方法详解

    uniapp中常用的事件处理方法详解

    在UniApp中事件处理非常重要,通过事件处理可以实现用户与应用程序之间的交互,这篇文章主要给大家介绍了关于uniapp中常用的事件处理方法的相关资料,需要的朋友可以参考下
    2023-12-12

最新评论