JS之DOM操作
2011-11-08 01:50 三皮开发时 阅读(603) 评论(0) 编辑 收藏 举报一、访问值方式
标签取值
例如DIV、SPAN、A 等标签，取值方式：
document.getElementById("id").innerHTML
文本框/域取值
<input id="b" type="text" value="xxx"> or <textarea id="b" rows="3" cols='25'>轻量级Java EE企业应用实战</textarea>
取值方式：
document.getElementById("b").value
还有一种,通过form来获取
document.getElementById('formID').elements['b'].value
下拉框/下拉列表
最重要的是取道索引值:selectID.options[curTarget.selectedIndex + 1]);"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 访问列表项 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<select id="mySelect" name="mySelect" size="6">
<option value="java">疯狂Java讲义</option>
<option value="ssh">轻量级Java EE企业应用实战</option>
<option value="ajax" selected="selected">疯狂Ajax讲义</option>
<option value="xml">疯狂XML讲义</option>
<option value="ejb">经典Java EE企业应用实战</option>
<option value="workflow">疯狂Workflow讲义</option>
</select><br />
<input type="button" value="第一个"
onclick="change(curTarget.options[0]);" />
<input type="button" value="上一个"
onclick="change(curTarget.options[curTarget.selectedIndex - 1]);" />
<input type="button" value="下一个"
onclick="change(curTarget.options[curTarget.selectedIndex + 1]);" />
<input type="button" value="最后一个"
onclick="change(curTarget.options[curTarget.length - 1]);" />
<script type="text/javascript">
var curTarget = document.getElementById("mySelect");
function change(target)
{
alert(target.text);
alert(target.value);
}
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 访问列表项 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<select id="mySelect" name="mySelect" size="6">
<option value="java">疯狂Java讲义</option>
<option value="ssh">轻量级Java EE企业应用实战</option>
<option value="ajax" selected="selected">疯狂Ajax讲义</option>
<option value="xml">疯狂XML讲义</option>
<option value="ejb">经典Java EE企业应用实战</option>
<option value="workflow">疯狂Workflow讲义</option>
</select><br />
<input type="button" value="第一个"
onclick="change(curTarget.options[0]);" />
<input type="button" value="上一个"
onclick="change(curTarget.options[curTarget.selectedIndex - 1]);" />
<input type="button" value="下一个"
onclick="change(curTarget.options[curTarget.selectedIndex + 1]);" />
<input type="button" value="最后一个"
onclick="change(curTarget.options[curTarget.length - 1]);" />
<script type="text/javascript">
var curTarget = document.getElementById("mySelect");
function change(target)
{
alert(target.text);
alert(target.value);
}
</script>
</body>
</html>
表格的访问
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 访问表格元素 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<table id="d" border="1">
<caption>疯狂Java体系</caption>
<tr>
<td>疯狂Java讲义</td>
<td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂XML讲义</td>
<td>疯狂Workflow讲义</td>
</tr>
</table>
<input type="button" value="表格标题"
onclick="alert(document.getElementById('d').caption.innerHTML);" />
<input type="button" value="第一行、第一格"
onclick="alert(document.getElementById('d').rows[0].cells[0].innerHTML);" />
<input type="button" value="第二行、第二格"
onclick="alert(document.getElementById('d').rows[1].cells[1].innerHTML);" />
<input type="button" value="第三行、第二格"
onclick="alert(document.getElementById('d').rows[2].cells[1].innerHTML);" />
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 访问表格元素 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<table id="d" border="1">
<caption>疯狂Java体系</caption>
<tr>
<td>疯狂Java讲义</td>
<td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂XML讲义</td>
<td>疯狂Workflow讲义</td>
</tr>
</table>
<input type="button" value="表格标题"
onclick="alert(document.getElementById('d').caption.innerHTML);" />
<input type="button" value="第一行、第一格"
onclick="alert(document.getElementById('d').rows[0].cells[0].innerHTML);" />
<input type="button" value="第二行、第二格"
onclick="alert(document.getElementById('d').rows[1].cells[1].innerHTML);" />
<input type="button" value="第三行、第二格"
onclick="alert(document.getElementById('d').rows[2].cells[1].innerHTML);" />
</body>
</html>
关于节点的位置（父、兄弟的选取）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 根据节点关系访问XHTML元素 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<style type="text/css">
/* 定义改变背景色的CSS，表示被选中的项 */
.selected {
background-color:#6666ff
}
</style>
</head>
<body>
<ol id="books">
<li id="java">疯狂Java讲义</li>
<li id="ssh">轻量级Java EE企业应用实战</li>
<li id="ajax" class="selected">疯狂Ajax讲义</li>
<li id="xml">疯狂XML讲义</li>
<li id="ejb">经典Java EE企业应用实战</li>
<li id="workflow">疯狂Workflow讲义</li>
</ol>
<!-- 父节点 -->
<input type="button" value="父节点"
onclick="change(curTarget.parentNode);" />
<!-- 父节点的第一个孩子节点的下一个节点 -->
<input type="button" value="第一个"
onclick="change(curTarget.parentNode.firstChild.nextSibling);" />
<input type="button" value="上一个"
onclick="change(curTarget.previousSibling.previousSibling);" />
<input type="button" value="下一个"
onclick="change(curTarget.nextSibling.nextSibling);" />
<input type="button" value="最后一个"
onclick="change(curTarget.parentNode.lastChild.previousSibling);" />
<script type="text/javascript">
var curTarget = document.getElementById("ajax");
function change(target)
{
alert(target.innerHTML);
}
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 根据节点关系访问XHTML元素 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<style type="text/css">
/* 定义改变背景色的CSS，表示被选中的项 */
.selected {
background-color:#6666ff
}
</style>
</head>
<body>
<ol id="books">
<li id="java">疯狂Java讲义</li>
<li id="ssh">轻量级Java EE企业应用实战</li>
<li id="ajax" class="selected">疯狂Ajax讲义</li>
<li id="xml">疯狂XML讲义</li>
<li id="ejb">经典Java EE企业应用实战</li>
<li id="workflow">疯狂Workflow讲义</li>
</ol>
<!-- 父节点 -->
<input type="button" value="父节点"
onclick="change(curTarget.parentNode);" />
<!-- 父节点的第一个孩子节点的下一个节点 -->
<input type="button" value="第一个"
onclick="change(curTarget.parentNode.firstChild.nextSibling);" />
<input type="button" value="上一个"
onclick="change(curTarget.previousSibling.previousSibling);" />
<input type="button" value="下一个"
onclick="change(curTarget.nextSibling.nextSibling);" />
<input type="button" value="最后一个"
onclick="change(curTarget.parentNode.lastChild.previousSibling);" />
<script type="text/javascript">
var curTarget = document.getElementById("ajax");
function change(target)
{
alert(target.innerHTML);
}
</script>
</body>
</html>
二、编辑，创建
编辑表格值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 编辑表格值 </title>
</head>
<body>
改变第<input id="row" type="text" size="2" />行，
第<input id="cel" type="text" size="2" />列的值为:
<input id="celVal" type="text" size="16" /><br />
<input id="chg" type="button" value="改变" onclick="change();" />
<table id="d" border="1">
<tr>
<td>疯狂Java讲义</td>
<td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂XML讲义</td>
<td>疯狂Workflow讲义</td>
</tr>
</table>
<script type="text/javascript">
function change()
{
var tb = document.getElementById("d");
var row = document.getElementById("row").value ;
row = parseInt(row);
//如果需要修改的行不是整数，弹出警告
if(isNaN(row))
{
alert("您要修改的行必须是整数");
return false
}
var cel = document.getElementById("cel").value ;
cel = parseInt(cel);
//如果需要修改的列不是整数，弹出警告
if(isNaN(cel))
{
alert("您要修改的列必须是整数");
return false;
}
//如果需要修改的行、或者列超出了表格的行或列。弹出警告
if (row > tb.rows.length ||
cel > tb.rows.item(0).cells.length)
{
alert("要修改的单元格不在该表格内");
return false;
}
//修改单元格的值
tb.rows.item(row - 1).cells.item(cel - 1).innerHTML
= document.getElementById("celVal").value;
}
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 编辑表格值 </title>
</head>
<body>
改变第<input id="row" type="text" size="2" />行，
第<input id="cel" type="text" size="2" />列的值为:
<input id="celVal" type="text" size="16" /><br />
<input id="chg" type="button" value="改变" onclick="change();" />
<table id="d" border="1">
<tr>
<td>疯狂Java讲义</td>
<td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂XML讲义</td>
<td>疯狂Workflow讲义</td>
</tr>
</table>
<script type="text/javascript">
function change()
{
var tb = document.getElementById("d");
var row = document.getElementById("row").value ;
row = parseInt(row);
//如果需要修改的行不是整数，弹出警告
if(isNaN(row))
{
alert("您要修改的行必须是整数");
return false
}
var cel = document.getElementById("cel").value ;
cel = parseInt(cel);
//如果需要修改的列不是整数，弹出警告
if(isNaN(cel))
{
alert("您要修改的列必须是整数");
return false;
}
//如果需要修改的行、或者列超出了表格的行或列。弹出警告
if (row > tb.rows.length ||
cel > tb.rows.item(0).cells.length)
{
alert("要修改的单元格不在该表格内");
return false;
}
//修改单元格的值
tb.rows.item(row - 1).cells.item(cel - 1).innerHTML
= document.getElementById("celVal").value;
}
</script>
</body>
</html>
下拉框的创建与赋值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 添加选项 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body id="test">
<script type="text/javascript">
//创建<select.../>对象
var a = document.createElement("select");
//为<select.../>对象增加10个选项
for (var i = 0 ; i < 10 ; i++)
{
//创建一个<option.../>元素
var op = new Option('新增的选项' + i , i);
a.options[i] = op;
}
//设置列表框高度为5.调整size大于1话就会成了下拉列表
a.size = 1;
//将列表框增加成body元素的子节点
document.getElementById("test").appendChild(a);
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 添加选项 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body id="test">
<script type="text/javascript">
//创建<select.../>对象
var a = document.createElement("select");
//为<select.../>对象增加10个选项
for (var i = 0 ; i < 10 ; i++)
{
//创建一个<option.../>元素
var op = new Option('新增的选项' + i , i);
a.options[i] = op;
}
//设置列表框高度为5.调整size大于1话就会成了下拉列表
a.size = 1;
//将列表框增加成body元素的子节点
document.getElementById("test").appendChild(a);
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 删除列表项 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<input id="opValue" type="text"/>
<input id="add" type="button" value="增加" onclick="add();"/>
<input id="del" type="button" value="删除" onclick="del();"/><br />
<select id="show" size="1" style="width:120px;">
</select>
<script>
var show = document.getElementById("show");
//增加下拉列表的函数
function add()
{
//以文本框的值创建一个<option.../>元素
var op = new Option(document.getElementById('opValue').value);
//增加选项
show.options[show.options.length] = op;
}
function del()
{
//如果有选项
if (show.options.length > 0)
{
//删除最后的一个选项
show.options[show.selectedIndex] = null;
}
}
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 删除列表项 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<input id="opValue" type="text"/>
<input id="add" type="button" value="增加" onclick="add();"/>
<input id="del" type="button" value="删除" onclick="del();"/><br />
<select id="show" size="1" style="width:120px;">
</select>
<script>
var show = document.getElementById("show");
//增加下拉列表的函数
function add()
{
//以文本框的值创建一个<option.../>元素
var op = new Option(document.getElementById('opValue').value);
//增加选项
show.options[show.options.length] = op;
}
function del()
{
//如果有选项
if (show.options.length > 0)
{
//删除最后的一个选项
show.options[show.selectedIndex] = null;
}
}
</script>
</body>
</html>
表格的创建与赋值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 添加表格 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body id="test">
<script type="text/javascript">
//创建一个表格对象
var a = document.createElement("table");
//设置表格的边框为1。
a.border=1;
var caption = a.createCaption();
caption.innerHTML = "表格标题";
//为表格循环插入5行
for (var i = 0 ; i < 5 ; i++)
{
//插入行
var tr = a.insertRow(i);
//为每行循环插入7列
for (var j = 0 ; j < 7 ; j++)
{
//循环插入7列
var td = tr.insertCell(j);
//设置每个单元格的内容
td.innerHTML = "单元格内容 " + i + j;
}
}
//将表格元素添加到HTML文档内
document.getElementById("test").appendChild(a);
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 添加表格 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body id="test">
<script type="text/javascript">
//创建一个表格对象
var a = document.createElement("table");
//设置表格的边框为1。
a.border=1;
var caption = a.createCaption();
caption.innerHTML = "表格标题";
//为表格循环插入5行
for (var i = 0 ; i < 5 ; i++)
{
//插入行
var tr = a.insertRow(i);
//为每行循环插入7列
for (var j = 0 ; j < 7 ; j++)
{
//循环插入7列
var td = tr.insertCell(j);
//设置每个单元格的内容
td.innerHTML = "单元格内容 " + i + j;
}
}
//将表格元素添加到HTML文档内
document.getElementById("test").appendChild(a);
</script>
</body>
</html>
[注]: 还有一种情况,就是假设已有了一张表,表中已有部分数据,不如th等信息,现在需要动态的插入行,并且控制插入行的位置,让动态生成的tr在th之后
以下是代码示例：
var tabPlace = document.getElementById("placetabTh");
for(var i = 0; i < 5; i++){
//insertRow()可以带参数,控制插入行的位置
for(var i = 0; i < 5; i++){
//insertRow()可以带参数,控制插入行的位置
var tr = tabPlace.insertRow(tabPlace.rows.length-1);
for (var j = 0 ; j < 4 ; j++){
//循环插入7列
var td = tr.insertCell(j);
//设置每个单元格的内容
td.innerHTML = "单元格内容 " + i + j;
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 删除表格的行或列 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<input id="delrow" type="button" value="删除表格最后一行"
onclick="delrow();" /><br />
<input id="delcell" type="button" value="删除最后一行的最后一格"
onclick="delcell();" /><br />
<table id="test" border="1" width="400px">
<caption>疯狂Java体系</caption>
<tr>
<td>疯狂Java讲义</td>
<td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂XML讲义</td>
<td>疯狂Workflow讲义</td>
</tr>
</table>
<script type="text/javascript">
//获取目标表格
var tab = document.getElementById("test");
//删除行的函数
function delrow()
{
if (tab.rows.length > 0)
{
//删除最后一行
tab.deleteRow(tab.rows.length - 1);
}
}
//删除目标表格的最后一格
function delcell()
{
//获取表格的所有行
var rowList = tab.rows;
//获取表格的最后一行
var lastRow = rowList.item(rowList.length - 1);
if (lastRow.cells.length > 0)
{
//删除表格的最后一格
lastRow.deleteCell(lastRow.cells.length - 1);
}
}
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 删除表格的行或列 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<input id="delrow" type="button" value="删除表格最后一行"
onclick="delrow();" /><br />
<input id="delcell" type="button" value="删除最后一行的最后一格"
onclick="delcell();" /><br />
<table id="test" border="1" width="400px">
<caption>疯狂Java体系</caption>
<tr>
<td>疯狂Java讲义</td>
<td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂XML讲义</td>
<td>疯狂Workflow讲义</td>
</tr>
</table>
<script type="text/javascript">
//获取目标表格
var tab = document.getElementById("test");
//删除行的函数
function delrow()
{
if (tab.rows.length > 0)
{
//删除最后一行
tab.deleteRow(tab.rows.length - 1);
}
}
//删除目标表格的最后一格
function delcell()
{
//获取表格的所有行
var rowList = tab.rows;
//获取表格的最后一行
var lastRow = rowList.item(rowList.length - 1);
if (lastRow.cells.length > 0)
{
//删除表格的最后一格
lastRow.deleteCell(lastRow.cells.length - 1);
}
}
</script>
</body>
</html>
克隆的技巧
提高复用，不用麻烦的些documeng.createElement("XXX");
这里需要提一下documeng.createElement("XXX");假如这个XXX不是标签或者元素的话(非法字符)则会报错,[object HTMLUnknownElement]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 复制节点 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<ul id = "d">
<li>疯狂Java讲义</li>
<li>
<span>疯狂Java讲义span1</span>
<span>疯狂Java讲义span2</span>
</li>
</ul>
<script type="text/javascript">
//获取ID为d的节点
var ul = document.getElementById("d");
//复制
var ajax = ul.firstChild.cloneNode(false);
//修改被复制的节点
ajax.innerHTML = "疯狂Ajax讲义";
//将复制的节点添加到页面中
ul.appendChild(ajax);
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 复制节点 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<ul id = "d">
<li>疯狂Java讲义</li>
<li>
<span>疯狂Java讲义span1</span>
<span>疯狂Java讲义span2</span>
</li>
</ul>
<script type="text/javascript">
//获取ID为d的节点
var ul = document.getElementById("d");
//复制
var ajax = ul.firstChild.cloneNode(false);
//修改被复制的节点
ajax.innerHTML = "疯狂Ajax讲义";
//将复制的节点添加到页面中
ul.appendChild(ajax);
</script>
</body>
</html>
指定元素插入点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 插入节点 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<ul id = "d">
<li>疯狂Java讲义</li>
</ul>
<script type="text/javascript">
//获取ID为d的节点
var ul = document.getElementById("d");
//复制ul的第二个子节点（不复制当前节点的后代节点）
var ajax = ul.firstChild.cloneNode(false);
//修改被复制的节点
ajax.innerHTML = "疯狂Ajax讲义";
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 插入节点 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<ul id = "d">
<li>疯狂Java讲义</li>
</ul>
<script type="text/javascript">
//获取ID为d的节点
var ul = document.getElementById("d");
//复制ul的第二个子节点（不复制当前节点的后代节点）
var ajax = ul.firstChild.cloneNode(false);
//修改被复制的节点
ajax.innerHTML = "疯狂Ajax讲义";
//insertBefore(node1,node2) -> 将节点node1插入到节点node2之前
//replaceChild(node1, node2) -> 将节点node1替换节点node2
//replaceChild(node1, node2) -> 将节点node1替换节点node2
//只有appendChild、insertBefore、replaceChild方法,没有insertAfter
ul.insertBefore(ajax , ul.firstChild);
</script>
</body>
</html>
三、实例
表格双击成文本框,文本框失去焦点就保存修改值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 可编辑的表格 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<table id="test" border="1" width="400px">
<caption>疯狂Java体系</caption>
<tr>
<td>疯狂Java讲义</td>
<td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂XML讲义</td>
<td>疯狂Workflow讲义</td>
</tr>
</table>
<script>
//双击单元格后，在单元格中出现的输入文本框。
var tmpIn = document.createElement("input");
tmpIn.type="text";
//双击单元格后的当前单元格
var curCell;
//生成可编辑的单元格
function edit(event)
{
//此处是为了兼顾IE浏览器和Firefox浏览器
//因为它们所使用的事件机制不同
//目标是获取被双击的单元格
if( event == null )
{
curCell = window.event.srcElement;
}
else
{
curCell = event.target;
}
//将单元格的值填充到文本输入框的值
tmpIn.value=curCell.innerHTML;
//当文本框失去焦点时触发end函数
tmpIn.onblur= end;
//情况当前单元格的内容
curCell.innerHTML = "";
//将文本框添加到当前单元格内
curCell.appendChild(tmpIn);
}
//编辑单元格结束后的函数
function end()
{
//将文本框内的值赋给当前单元格内
curCell.innerHTML=tmpIn.value;
}
//为表格的双击事件绑定事件处理函数
document.getElementById("test").ondblclick = edit;
</script>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 可编辑的表格 </title>
<meta name="author" content="Yeeku.H.Lee" />
<meta name="website" content="http://www.crazyit.org" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
</head>
<body>
<table id="test" border="1" width="400px">
<caption>疯狂Java体系</caption>
<tr>
<td>疯狂Java讲义</td>
<td>轻量级Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂Ajax讲义</td>
<td>经典Java EE企业应用实战</td>
</tr>
<tr>
<td>疯狂XML讲义</td>
<td>疯狂Workflow讲义</td>
</tr>
</table>
<script>
//双击单元格后，在单元格中出现的输入文本框。
var tmpIn = document.createElement("input");
tmpIn.type="text";
//双击单元格后的当前单元格
var curCell;
//生成可编辑的单元格
function edit(event)
{
//此处是为了兼顾IE浏览器和Firefox浏览器
//因为它们所使用的事件机制不同
//目标是获取被双击的单元格
if( event == null )
{
curCell = window.event.srcElement;
}
else
{
curCell = event.target;
}
//将单元格的值填充到文本输入框的值
tmpIn.value=curCell.innerHTML;
//当文本框失去焦点时触发end函数
tmpIn.onblur= end;
//情况当前单元格的内容
curCell.innerHTML = "";
//将文本框添加到当前单元格内
curCell.appendChild(tmpIn);
}
//编辑单元格结束后的函数
function end()
{
//将文本框内的值赋给当前单元格内
curCell.innerHTML=tmpIn.value;
}
//为表格的双击事件绑定事件处理函数
document.getElementById("test").ondblclick = edit;
</script>
</body>
</html>
四 、引自他文
js-表格(table)添加列、删除列
功能图片截图如下：
一、Js代码如下：
<script language="javascript" type="text/javascript">
function findObj(theObj, theDoc) {
var p, i, foundObj;
if (!theDoc) theDoc = document;
if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p);
}
if (!(foundObj = theDoc[theObj]) && theDoc.all)
foundObj = theDoc.all[theObj]; for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i = 0; !foundObj &&
theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document);
if (!foundObj && document.getElementById)
foundObj = document.getElementById(theObj); return foundObj;
}
//添加一个列
count = 1;
function AddNewColumn() {
var txtTDLastIndex = findObj("txtTDLastIndex", document);
var columnID = parseInt(txtTDLastIndex.value);
var tab = document.getElementById("tab");
var rowLength = tab.rows.length;
var columnLength = tab.rows[1].cells.length;
for (var i = 0; i < rowLength; i++) {
if (i == 0) {
var oTd = tab.rows[0].insertCell(columnLength);
oTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignColumn(" + (++columnID) + ")\">删除</a></div>";
} else if (i == 1) {//第一列:序号
var oTd = tab.rows[1].insertCell(columnLength);
oTd.innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + (++count) + "</div>";
} else if (i > 1) {
var oTd = tab.rows[i].insertCell(columnLength);
oTd.id = "column" + columnID;
oTd.innerHTML = "<textarea id='' rows='4' style='width:150; height:40px;'></textarea>";
}
}
}
//添加一个行
var index = 1;
function AddNewRow() {
var txtTRLastIndex = findObj("txtTRLastIndex", document);
var rowID = parseInt(txtTRLastIndex.value);
var tab = findObj("tab", document);
var columnLength = tab.rows[0].cells.length;
//添加行
var newTR = tab.insertRow(tab.rows.length);
newTR.id = "SignItem" + rowID;
for (var i = 0; i < columnLength; i++) {
if (i == 0) {//第一列:序号
newTR.insertCell(0).innerHTML = ++index;
} else if (i > 0 && i < 4) {
newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' style='border: 0px' size='12' />";
}
else if (i >= 4) {
newTR.insertCell(i).innerHTML = "<textarea id='' rows='4' style='width:150; height:40px;'></textarea>";
}
}
//添加列:删除按钮
var lastTd = newTR.insertCell(columnLength);
lastTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";
//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString();
}
//删除指定行
function DeleteSignRow(rowid) {
var tab = findObj("tab", document);
var signItem = findObj(rowid, document);
//获取将要删除的行的Index
var rowIndex = signItem.rowIndex;
//删除指定Index的行
tab.deleteRow(rowIndex);
//重新排列序号，如果没有序号，这一步省略
for (i = 2; i < tab.rows.length; i++) {
tab.rows[i].cells[0].innerHTML = i - 1;
}
--index
}
//删除指定列
function DeleteSignColumn(columnId) {
var tab = document.getElementById("tab");
var columnLength = tab.rows[1].cells.length;
//删除指定单元格
for (var i = 0; i < tab.rows.length; i++) {
tab.rows[i].deleteCell(columnId);
}
//重新排列序号，如果没有序号，这一步省略
var column = columnLength - 4;
for (var j = 1; j < column; j++) {
tab.rows[1].cells[j + 3].innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + j + "</div>";
}
--count;
}
//清空列表
function ClearAllSign() {
//if (confirm('确定要清空所有吗？')) {
index = 0;
var tab = findObj("tab", document);
var rowscount = tab.rows.length;
//循环删除行,从最后一行往前删除
for (i = rowscount - 1; i > 1; i--) {
tab.deleteRow(i);
}
//重置最后行号为1
var txtTRLastIndex = findObj("txtTRLastIndex", document);
txtTRLastIndex.value = "1";
//预添加一行
AddNewRow();
//}
}
</script>
二、HTML部分：
view sourceprint?
<div style="overflow: auto; height: 350px; width: 860px; padding: 10px;">
<table cellpadding="1" id="tab" cellspacing="0" bordercolor="#A3C0E8" border="1"
style="text-align: center">
<tr id="tr1">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr id="trHeader">
<td style="background: #D3E6FE">
NO
</td>
<td style="background: #D3E6FE">
试验项目
</td>
<td style="background: #D3E6FE">
检验项目
</td>
<td style="background: #D3E6FE">
标准
</td>
<td style="background: #D3E6FE">
1
</td>
</tr>
<tr>
<td>
1
</td>
<td>
<input id='textItem0' type='text' style="border: 0px" size='12' />
</td>
<td>
<input id='checkItem0' type='text' style="border: 0px" size='12' />
</td>
<td>
<input id='stand0' type='text' style="border: 0px" size='12' />
</td>
<td>
<textarea rows="4" id="" style="width: 150px; height: 40px;"></textarea>
</td>
</tr>
</table>
<table cellpadding="1" cellspacing="0" bordercolor="#A3C0E8" border="1" style="text-align: center">
<tr>
<td style="background: #D3E6FE">
</td>
<td style="background: #D3E6FE">
<input type="button" name="Submit" value="新增行" onclick="AddNewRow()" />
</td>
<td style="background: #D3E6FE">
<input type="button" name="Submit" value="新增列" onclick="AddNewColumn()" />
</td>
<td style="background: #D3E6FE">
<input type="button" name="Submit2" value="全部清空" onclick="ClearAllSign()" />
</td>
<td style="background: #D3E6FE">
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
<input name='txtTDLastIndex' type='hidden' id='txtTDLastIndex' value="4" />
</td>
</tr>
</table>
</div>
三、说明：js代码目前还不是最优的写法，希望您提出高见。
功能图片截图如下：
一、Js代码如下：
<script language="javascript" type="text/javascript">
function findObj(theObj, theDoc) {
var p, i, foundObj;
if (!theDoc) theDoc = document;
if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p);
}
if (!(foundObj = theDoc[theObj]) && theDoc.all)
foundObj = theDoc.all[theObj]; for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj]; for (i = 0; !foundObj &&
theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document);
if (!foundObj && document.getElementById)
foundObj = document.getElementById(theObj); return foundObj;
}
//添加一个列
count = 1;
function AddNewColumn() {
var txtTDLastIndex = findObj("txtTDLastIndex", document);
var columnID = parseInt(txtTDLastIndex.value);
var tab = document.getElementById("tab");
var rowLength = tab.rows.length;
var columnLength = tab.rows[1].cells.length;
for (var i = 0; i < rowLength; i++) {
if (i == 0) {
var oTd = tab.rows[0].insertCell(columnLength);
oTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignColumn(" + (++columnID) + ")\">删除</a></div>";
} else if (i == 1) {//第一列:序号
var oTd = tab.rows[1].insertCell(columnLength);
oTd.innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + (++count) + "</div>";
} else if (i > 1) {
var oTd = tab.rows[i].insertCell(columnLength);
oTd.id = "column" + columnID;
oTd.innerHTML = "<textarea id='' rows='4' style='width:150; height:40px;'></textarea>";
}
}
}
//添加一个行
var index = 1;
function AddNewRow() {
var txtTRLastIndex = findObj("txtTRLastIndex", document);
var rowID = parseInt(txtTRLastIndex.value);
var tab = findObj("tab", document);
var columnLength = tab.rows[0].cells.length;
//添加行
var newTR = tab.insertRow(tab.rows.length);
newTR.id = "SignItem" + rowID;
for (var i = 0; i < columnLength; i++) {
if (i == 0) {//第一列:序号
newTR.insertCell(0).innerHTML = ++index;
} else if (i > 0 && i < 4) {
newTR.insertCell(i).innerHTML = "<input id='textItem0' type='text' style='border: 0px' size='12' />";
}
else if (i >= 4) {
newTR.insertCell(i).innerHTML = "<textarea id='' rows='4' style='width:150; height:40px;'></textarea>";
}
}
//添加列:删除按钮
var lastTd = newTR.insertCell(columnLength);
lastTd.innerHTML = "<div align='center' style='width:40px'><a href='javascript:' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";
//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString();
}
//删除指定行
function DeleteSignRow(rowid) {
var tab = findObj("tab", document);
var signItem = findObj(rowid, document);
//获取将要删除的行的Index
var rowIndex = signItem.rowIndex;
//删除指定Index的行
tab.deleteRow(rowIndex);
//重新排列序号，如果没有序号，这一步省略
for (i = 2; i < tab.rows.length; i++) {
tab.rows[i].cells[0].innerHTML = i - 1;
}
--index
}
//删除指定列
function DeleteSignColumn(columnId) {
var tab = document.getElementById("tab");
var columnLength = tab.rows[1].cells.length;
//删除指定单元格
for (var i = 0; i < tab.rows.length; i++) {
tab.rows[i].deleteCell(columnId);
}
//重新排列序号，如果没有序号，这一步省略
var column = columnLength - 4;
for (var j = 1; j < column; j++) {
tab.rows[1].cells[j + 3].innerHTML = "<div style='background: #D3E6FE;width=100%;'>" + j + "</div>";
}
--count;
}
//清空列表
function ClearAllSign() {
//if (confirm('确定要清空所有吗？')) {
index = 0;
var tab = findObj("tab", document);
var rowscount = tab.rows.length;
//循环删除行,从最后一行往前删除
for (i = rowscount - 1; i > 1; i--) {
tab.deleteRow(i);
}
//重置最后行号为1
var txtTRLastIndex = findObj("txtTRLastIndex", document);
txtTRLastIndex.value = "1";
//预添加一行
AddNewRow();
//}
}
</script>
二、HTML部分：
view sourceprint?
<div style="overflow: auto; height: 350px; width: 860px; padding: 10px;">
<table cellpadding="1" id="tab" cellspacing="0" bordercolor="#A3C0E8" border="1"
style="text-align: center">
<tr id="tr1">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr id="trHeader">
<td style="background: #D3E6FE">
NO
</td>
<td style="background: #D3E6FE">
试验项目
</td>
<td style="background: #D3E6FE">
检验项目
</td>
<td style="background: #D3E6FE">
标准
</td>
<td style="background: #D3E6FE">
1
</td>
</tr>
<tr>
<td>
1
</td>
<td>
<input id='textItem0' type='text' style="border: 0px" size='12' />
</td>
<td>
<input id='checkItem0' type='text' style="border: 0px" size='12' />
</td>
<td>
<input id='stand0' type='text' style="border: 0px" size='12' />
</td>
<td>
<textarea rows="4" id="" style="width: 150px; height: 40px;"></textarea>
</td>
</tr>
</table>
<table cellpadding="1" cellspacing="0" bordercolor="#A3C0E8" border="1" style="text-align: center">
<tr>
<td style="background: #D3E6FE">
</td>
<td style="background: #D3E6FE">
<input type="button" name="Submit" value="新增行" onclick="AddNewRow()" />
</td>
<td style="background: #D3E6FE">
<input type="button" name="Submit" value="新增列" onclick="AddNewColumn()" />
</td>
<td style="background: #D3E6FE">
<input type="button" name="Submit2" value="全部清空" onclick="ClearAllSign()" />
</td>
<td style="background: #D3E6FE">
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
<input name='txtTDLastIndex' type='hidden' id='txtTDLastIndex' value="4" />
</td>
</tr>
</table>
</div>
三、说明：js代码目前还不是最优的写法，希望您提出高见。
