logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

使用DOM操作表格

 WindySky 2009-07-03
创建表格
<%@ 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">
            <p><input type="button" 
            value="创建表格" onclick="createTable()"/></p>
        </div>
        <div id="footer">
            <jsp:include page="/web/page/branch/footer.jsp"/>
        </div>
    </div>
</body>
</html>

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

function createTable(){    
    // 创建表格节点
    var tableNode=document.createElement("table");
    
    // 设置表格属性
    tableNode.setAttribute("border","1");
    tableNode.setAttribute("width","100%");

    for(var i=0;i<10;i++){
        // 创建table的一行，等于一个tr
        var trNode=tableNode.insertRow(i);

        
        for(var j=0;j<10;j++){
            // 创建一行中的一个单元格，等于一个TD
            var tdNode=trNode.insertCell(j);            
            
            // 创建TD中的文本
            var text=document.createTextNode(i*j);
            // 将文本添加到TD中
            tdNode.appendChild(text);
        }
    }
    
    // 使用document.getElementById取得id为content的单个节点
    var contentDiv=document.getElementById("content");
    
    // 将表格添加到contentDiv中
    contentDiv.appendChild(tableNode);
}

//-->
</script>



通过修改InnerHTML创建表格
<%@ 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">
            <p><input type="button" 
            value="创建表格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(){    
    // 创建表格的文本
    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的单个节点
    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找到表格节点
    var tableNode=document.getElementById("tableNode");    
    
    // 创建table的一行，等于一个tr
    var trNode=tableNode.insertRow(0);
    
    for(var j=0;j<4;j++){
        // 创建一行中的一个单元格，等于一个TD
        var tdNode=trNode.insertCell(j);            
        
        // 创建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找到表格节点
    var tableNode=document.getElementById("tableNode");
    
    // 如果行数大于零则删除第一行，否则弹出对话框
    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找到表格节点
    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的节点
    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找到表格节点
    var tableNode=document.getElementById("tableNode");
    
    // 如果列数大于零则删除第一列，否则弹出对话框
    if(tableNode.cells.length>0){
    
        for(var j=0;j<tableNode.rows.length;j++){
            // 删除每一行的第一个单元格从而删除第一列
            tableNode.rows[j].deleteCell(0);
        }        
    }
    else{
        alert("表格列删除完毕");
    }
}

//-->
</script>

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： WindySky > 《表格》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多