创建表格
<%@ 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>