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

這篇文章介紹了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