小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

使用DOM操作表格

 WindySky 2009-07-03
創(chuàng)建表格
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-創(chuàng)建表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <p><input type="button" 
            value="創(chuàng)建表格" onclick="createTable()"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--

function createTable(){    
    // 創(chuàng)建表格節(jié)點
    var tableNode=document.createElement("table");
    
    // 設(shè)置表格屬性
    tableNode.setAttribute("border","1");
    tableNode.setAttribute("width","100%");

    for(var i=0;i<10;i++){
        // 創(chuàng)建table的一行，等于一個tr
        var trNode=tableNode.insertRow(i);

        
        for(var j=0;j<10;j++){
            // 創(chuàng)建一行中的一個單元格，等于一個TD
            var tdNode=trNode.insertCell(j);            
            
            // 創(chuàng)建TD中的文本
            var text=document.createTextNode(i*j);
            // 將文本添加到TD中
            tdNode.appendChild(text);
        }
    }
    
    // 使用document.getElementById取得id為content的單個節(jié)點
    var contentDiv=document.getElementById("content");
    
    // 將表格添加到contentDiv中
    contentDiv.appendChild(tableNode);
}

//-->
</script>



通過修改InnerHTML創(chuàng)建表格
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-創(chuàng)建表格2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <p><input type="button" 
            value="創(chuàng)建表格2" onclick="createTable()"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--

function createTable(){    
    // 創(chuàng)建表格的文本
    var tableHTML="<table border=1>";

    for(var i=0;i<10;i++){
        tableHTML+="<tr>";
        
        for(var j=0;j<10;j++){
            tableHTML+="<td>";            
            tableHTML+=(i*j);
            tableHTML+="</td>";        
        }
        
        tableHTML+="</tr>";
    }
    
    tableHTML+="</table>";
    
    // 使用document.getElementById取得id為content的單個節(jié)點
    var contentDiv=document.getElementById("content");
    
    // 將表格添加到contentDiv中
    contentDiv.innerHTML=tableHTML;
}

//-->
</script>



添加表格行
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-添加表格行</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <table id="tableNode" border=1>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
                <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
                <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
                <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
            </table>
            <p><input type="button" 
            value="添加表格行" onclick="addTableRow()"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--

function addTableRow(){    
    // 按ID找到表格節(jié)點
    var tableNode=document.getElementById("tableNode");    
    
    // 創(chuàng)建table的一行，等于一個tr
    var trNode=tableNode.insertRow(0);
    
    for(var j=0;j<4;j++){
        // 創(chuàng)建一行中的一個單元格，等于一個TD
        var tdNode=trNode.insertCell(j);            
        
        // 創(chuàng)建TD中的文本
        var text=document.createTextNode(j);
        // 將文本添加到TD中
        tdNode.appendChild(text);
    }
}

//-->
</script>



刪除表格行
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-刪除表格行</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <table id="tableNode" border=1>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
                <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
                <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
                <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
            </table>
            <p><input type="button" 
            value="刪除表格行" onclick="deleteTableRow()"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--

function deleteTableRow(){    
    // 按ID找到表格節(jié)點
    var tableNode=document.getElementById("tableNode");
    
    // 如果行數(shù)大于零則刪除第一行，否則彈出對話框
    if(tableNode.rows.length>0){
        // 刪除第一行
        tableNode.deleteRow(0);
    }
    else{
        alert("表格行刪除完畢");
    }
}

//-->
</script>


刪除當前表格行
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-刪除表格行2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <table  border=1>
                <tbody id="tbodyNode">
                <tr id="row1"><td>1</td><td>2</td><td>3</td><td><input type="button" 
            value="刪除" onclick="deleteRow('row1')"/></td></tr>
                <tr id="row2"><td>5</td><td>6</td><td>7</td><td><input type="button" 
            value="刪除" onclick="deleteRow('row2')"/></td></tr>
                <tr id="row3"><td>9</td><td>10</td><td>11</td><td><input type="button" 
            value="刪除" onclick="deleteRow('row3')"/></td></tr>
                <tr id="row4"><td>13</td><td>14</td><td>15</td><td><input type="button" 
            value="刪除" onclick="deleteRow('row4')"/></td></tr>
                <tr id="row5"><td>13</td><td>14</td><td>15</td><td><a href="javascript:deleteRow('row5')"/>刪除</a></td></tr>
                <tr id="row6"><td>23</td><td>24</td><td>25</td><td><a href="javascript:deleteRow('row6')"/>刪除</a></td></tr>
                <tr id="row7"><td>33</td><td>34</td><td>35</td><td><a href="javascript:deleteRow('row7')"/>刪除</a></td></tr>
                </tbody>
            </table>
            <p></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--

function deleteRow(id){    
    // 按ID找到表格節(jié)點
    var tbodyNode=document.getElementById("tbodyNode");
    
    var trNode=document.getElementById(id);
    
    tbodyNode.removeChild(trNode);
}

//-->
</script>



刪除選擇的表格行
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-刪除表格行3</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <table border=1>
                <tbody id="tbodyNode">
                    <tr id="row1"><td><input type="checkbox" name="chk" value="row1"/></td><td>2</td><td>3</td><td>4</td></tr>
                    <tr id="row2"><td><input type="checkbox" name="chk" value="row2"/></td><td>6</td><td>7</td><td>8</td></tr>
                    <tr id="row3"><td><input type="checkbox" name="chk" value="row3"/></td><td>10</td><td>11</td><td>12</td></tr>
                    <tr id="row4"><td><input type="checkbox" name="chk" value="row4"/></td><td>14</td><td>15</td><td>16</td></tr>
                </tbody>
            </table>
            <p><input type="button" 
            value="刪除選擇的表格行" onclick="deleteSelectedTableRow()"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--

function deleteSelectedTableRow(){    
    // 按ID找到tbodyNode
    var tbodyNode=document.getElementById("tbodyNode");

    // 使用document.getElementsByName取所有name為chk的節(jié)點
    var chkes=document.getElementsByName("chk");

    // 注意這里要逆向刪除行，正向刪除會導致后面的行下標變化
    for(var i=chkes.length-1;i>-1;i--){
        if(chkes[i].checked){
            var trNode=document.getElementById(chkes[i].getAttribute("value"));
            tbodyNode.removeChild(trNode);
        }
    }
}

//-->
</script>



刪除表格列
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dom操作-刪除表格列</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
    <div id="bodyDiv">
        <div id="header">
            <jsp:include page="/web/page/branch/header.jsp"/>
        </div>
        <div id="sidebar">
            <jsp:include page="/web/page/branch/sidebar.jsp"/>
        </div>
        <div id="content">
            <table id="tableNode" border=1>
                <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
                <tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
                <tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
                <tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
            </table>
            <p><input type="button" 
            value="刪除表格列" onclick="deleteTableCol()"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

<script LANGUAGE="JavaScript">
<!--

function deleteTableCol(){    
    // 按ID找到表格節(jié)點
    var tableNode=document.getElementById("tableNode");
    
    // 如果列數(shù)大于零則刪除第一列，否則彈出對話框
    if(tableNode.cells.length>0){
    
        for(var j=0;j<tableNode.rows.length;j++){
            // 刪除每一行的第一個單元格從而刪除第一列
            tableNode.rows[j].deleteCell(0);
        }        
    }
    else{
        alert("表格列刪除完畢");
    }
}

//-->
</script>

    本站是提供個人知識管理的網(wǎng)絡存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多