春风博客

春天里,百花香...

导航

<2008年4月>
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

统计

公告

MAIL: junglesong@gmail.com
MSN: junglesong_5@hotmail.com

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

使用DOM操作表格

创建表格
<%@ 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><href="javascript:deleteRow('row5')"/>删除</a></td></tr>
                
<tr id="row6"><td>23</td><td>24</td><td>25</td><td><href="javascript:deleteRow('row6')"/>删除</a></td></tr>
                
<tr id="row7"><td>33</td><td>34</td><td>35</td><td><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>



posted on 2008-04-05 16:05 sitinspring 阅读(1887) 评论(0)  编辑  收藏 所属分类: Web开发JavaScript


只有注册用户登录后才能发表评论。


网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.