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


    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>Js动态创建表格、删除行例-www.jbxue.com</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>
  • 相关阅读:
    Nginx 源码分析 ngx_string 的一些简单分析
    Nginx 源码分析 浅谈对模块module 的基本认知
    BP神经网络 C语言实现 下
    Quorum 机制
    TensorFlow.NET机器学习入门【9】后记
    WPF优秀组件推荐之Stylet(一)
    WPF优秀组件推荐之Stylet(二)
    WPF优秀组件推荐之FreeSpire
    WPF优秀组件推荐之LiveCharts
    WPF优秀组件推荐之MahApps
  • 原文地址:https://www.cnblogs.com/cfinder010/p/3203188.html
Copyright © 2020-2023  润新知