以下为正文内容,功能主要实现在一个页面中完成对数据的增、删、改、查操作。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="check.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表格操作</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" language="javascript" src="js/util.js"></script>
<script type="text/javascript">
//row操作行 cell操作单元格
function tbtest(){
//获得指定表格的所有单元格
var cells=$("tb").cells;
alert("单元格总个数:"+cells.length);
var rows=$("tb").rows;
alert("行数"+rows.length);
/*for(var i=0;i<row.length;i++){
var cells=rows[i];
}*/
//alert("第一行第一列的值是:"+(rows[0].cells)[0].innerHTML);
alert("第一行第一列的值是:"+(rows[0].cells)[0].innerText);
}
var index=0;
//增加一行
function addRow(){
try{
var tb=$("tb");
//原表格行数
var len=tb.rows.length;
index=len;
//防止删除之后 索引号不连续
//if(len>=index){
//index=len;
//}
//alert(len);
//tb.insertRow(0) 返回一个TableRow对象
//0表示表格第一行 合起来 在表格第一行加入一条数据
var tableRow=tb.insertRow(len);
//以下方法可以给新增的表格加入新的内容
//x表示第一行中的第一列
var x=tableRow.insertCell(0);
//y表示第一行中的第一列
var y=tableRow.insertCell(1);
//z表示功能列"删除"
var z=tableRow.insertCell(2);
x.innerHTML=index;
var filmName=$("filmname").value;
//影片名称动态加载
y.innerHTML=filmName;
z.innerHTML="<a href='#' onclick='del(this)'>删除</a>"+" "+
"<a href='#' onclick='update(this)'>修改</a>";
$("filmname").value="";
}catch(errMsg){
alert(errMsg.message);
}
}
//删除单元格
function del(r){
try{
//var tb=$("tb");
//tb.deleteRow(-1)
//alert(r.parentNode.parentNode.nodeName);
//alert(r.parentNode.parentNode.innerText);
//alert(r.parentNode.parentNode.innerHTML);
var i=r.parentNode.parentNode.rowIndex;
//索引号从0开始
//alert("索引号:"+i);
tb.deleteRow(i);
//alert(index);
//index=index+1;
}catch(errMsg){
alert(errMsg.message);
}
}
//定义一个全局的row(行级)变量
var row=null;
function up(){
try{
var fileName=$("filmname").value;
//alert(row.parentNode.parentNode.cells[1].innerText);
row.parentNode.parentNode.cells[1].innerHTML=fileName;
//更新完毕后 将按钮上的字修改成"添加影片" 并重新给按钮
//添加事件
$("btoper").value="增加影片";
$("btoper").onclick=addRow;
$("filmname").value="";
alert("修改完成");
}catch(errMsg){
alert("修改失败,错误原因是:"+errMsg.message);
}
}
function update(r){
//alert(r.parentNode.parentNode.nodeName);
//alert((r.parentNode.parentNode.cells)[1].innerText);
try{
//var txtContent=(r.parentNode.parentNode.cells)[1].innerText;
//contentText
var txtContent=(r.parentNode.parentNode.cells)[1].innerHTML;
alert("文本内容"+txtContent);
$("filmname").value=txtContent;
$("btoper").value="修改影片";
$("btoper").onclick=up;
row=r;
}catch(errMsg){
alert("异常信息:"+errMsg.message);
}
}
</script>
</head>
<body>
<table id="tb">
<tr id="tr1">
<td>编号</td>
<td>影片名称</td>
<td>操作</td>
</tr>
</table>
<br>
增加影片
<hr>
<form action="" name="filmform" id="filmform" method="post">
影片名称:<input type="text" name="filmname" id="filmname"/>
<br>
<input type="button" value="添加影片" onclick="addRow();" id="btoper" name="btoper">
</form>
<br>
<input type="button" value="表格DOM操作" onclick="tbtest();">
</body>
</html>