熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

js動態創建表格,刪除行列的小例子

2022-06-13   來源: JSP教程 
這篇文章介紹了js動態創建表格刪除行列的實例代碼有需要的朋友可以參考一下   復制代碼 代碼如下:

  
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>無標題文檔</title>
<link rel="stylesheet" href="tabcss" />
<script type="text/javascript" src="/Day/doctooljs"></script>
<script type="text/javascript">
function createTab()
{
    var tabNode = doccreateElement("table");
    var tbdNode = doccreateElement("tbody");
    var trNode = doccreateElement("tr");
    var tdNode = doccreateElement("td");
    var textNode = doccreateTextNode("單元格一");
    tdNodeappendChild(textNode);
    trNodeappendChild(tdNode);
    tbdNodeappendChild(trNode);
    tabNodeappendChild(tbdNode);
    byTag("div")[]appendChild(tabNode);
}
function createTab()
{
    var tabNode = doccreateElement("table");
    //tabNodeid = "tabid";
    tabNodesetAttribute("id""tabid");
    var row = byName("rownum")[]value;
    var col = byName("colnum")[]value;
    for(var x=; x<=row; x++)
    {
        var trNode = tabNodeinsertRow();
        for(var y=; y<=col; y++)
        {
            var tdNode = trNodeinsertCell();
            tdNodeinnerHTML = x+""+y;
        }
    }
    byTag("div")[]appendChild(tabNode);
    eventsrcElementdisabled = true;
}
function delRow()
{
    var tabNode = byId("tabid");
    if(tabNode==null)
    {
        alert("表格不存在 ");
        return;
    }
    var rownum = byName("delrow")[]value;
    if(rownum> && rownum<=tabNoderowslength)
        tabNodedeleteRow(rownum);
    else
    {
        alert("刪除的行不存在學習數數很重要");
    }
}
function delCol()
{
    var tabNode = byId("tabid");
    if(tabNode==null)
    {
        alert("表格不存在 ");
        return;
    }
    var colnum = byName("delcol")[]value;
    if(colnum> && colnum<=tabNoderows[]cellslength)
    {
        for(var x=;x<tabNoderowslength; x++)
        {
            tabNoderows[x]deleteCell(colnum);
        }
    }
    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>


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20196.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.