编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 表单的友好用户体现

Jan 07 Javascript

JSON为什么那样红为什么要用json(另有洞天)

Dec 26 Javascript

$.get获取一个文件的内容示例代码

Sep 11 Javascript

JS实现很酷的水波文字特效实例

Feb 26 Javascript

javascript实现uploadify上传格式以及个数限制

Nov 23 Javascript

a标签置灰不可点击的实现方法

Feb 06 Javascript

react开发教程之React 组件之间的通信方式

Aug 12 Javascript

解决ie11 SCRIPT5011:不能执行已释放Script的代码问题

May 05 Javascript

element-ui中Table表格省市区合并单元格的方法实现

Aug 07 Javascript

vue实现移动端触屏拖拽功能

Aug 21 Javascript

JS sort排序详细使用方法示例解析

Sep 27 Javascript

JS画布动态实现黑客帝国背景效果

Nov 08 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