1.简单的表格操作：
</style>
<script type="text/javascript">
function addRow(){
var fRow=document.getElementById("row3");
var newRow=document.createElement("tr") ; //创建行节点
var col1=document.createElement("td"); //创建单元格节点
col1.innerHTML="幸福从天而降"; //为单元格添加文本
var col2=document.createElement("td");
col2.innerHTML="¥18.50";
col2.setAttribute("align","center");
newRow.appendChild(col1); //把单元格添加到行节点中
newRow.appendChild(col2);
document.getElementById("row3").parentNode.insertBefore(newRow,fRow); //把行节点添加到表格末尾
}
function updateRow(){
var uRow=document.getElementById("row1");
//标题行设置为字体加粗、文本居中显示，背景颜色为灰色
uRow.setAttribute("style","font-weight:bold;text-align:center;background-color: #cccccc;");
}
function delRow(){
var dRow=document.getElementById("row2"); //访问被删除的行
dRow.parentNode.removeChild(dRow); //删除行
}
function copyRow(){
var oldRow=document.getElementById("row3"); //访问复制的行
var newRow=oldRow.cloneNode(true); //复制指定的行及子节点
document.getElementById("myTable").appendChild(newRow); //在指定节点的末尾添加行
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="myTable">
<tr id="row1">
<td>书名</td>
<td>价格</td>
</tr>
<tr id="row2">
<td>看得见风景的房间</td>
<td class="center">¥30.00</td>
</tr>
<tr id="row3">
<td>60个瞬间</td>
<td class="center">¥32.00</td>
</tr>
</table>
<input name="b1" type="button" value="增加一行" onclick="addRow()" />
<input name="b2" type="button" value="删除第2行" onclick="delRow()"/>
<input name="b3" type="button" value="修改标题样式" onclick="updateRow()"/>
<input name="b4" type="button" value="复制最后一行" onclick="copyRow()" />
</body>
</html>
2.能实现增加和删除的订单表：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>增加和删除订单</title>
<style type="text/css">
body {
font-size: 13px;
line-height: 25px;
}
table {
border-top: 1px solid #333;
border-left: 1px solid #333;
width: 400px;
}
td {
border-right: 1px solid #333;
border-bottom: 1px solid #333;
text-align: center;
}
.title {
font-weight: bold;
background-color: #cccccc;
}
</style>
<script type="text/javascript">
function addRow() {
var addTable = document.getElementById("order");
var row_index = addTable.rows.length - 1; //新插入行在表格中的位置
var newRow = addTable.insertRow(row_index); //插入新行
newRow.id = "row" + row_index; //设置新插入行的ID
var col1 = newRow.insertCell(0);
col1.innerHTML = "抗疲劳神奇钛项圈";
var col2 = newRow.insertCell(1);
col2.innerHTML = row_index;
var col3 = newRow.insertCell(2);
col3.innerHTML = "¥49.00";
var col4 = newRow.insertCell(3);
col4.innerHTML = "<input name='del" + row_index + "' type='button' value='删除' onclick=\"delRow('row" +
row_index + "')\" />";
}
function delRow(rowId) {
var row = document.getElementById(rowId).rowIndex; //删除行所在表格中的位置
document.getElementById("order").deleteRow(row);
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="order">
<tr class="title">
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="del1">
<td>防滑真皮休闲鞋</td>
<td>12</td>
<td>¥568.50</td>
<td><input name="rowdel" type="button" value="删除" onclick='delRow("del1")' /></td>
</tr>
<tr>
<td colspan="4" style="height:30px;">
<input name="addOrder" type="button" value="增加订单" onclick="addRow()" />
</td>
</tr>
</table>
</body>
</html>
3.能实现修改：
</style>
<script type="text/javascript">
function addRow() {
var addTable = document.getElementById("order");
var row_index = addTable.rows.length - 1; //新插入行在表格中的位置
var newRow = addTable.insertRow(row_index); //插入新行
newRow.id = "row" + row_index; //设置新插入行的ID
var col1 = newRow.insertCell(0);
col1.innerHTML = "抗疲劳神奇钛项圈";
var col2 = newRow.insertCell(1);
col2.innerHTML = row_index;
var col3 = newRow.insertCell(2);
col3.innerHTML = "¥49.00";
var col4 = newRow.insertCell(3);
col4.innerHTML = "<input name='del" + row_index + "' type='button' value='删除' onclick=\"delRow('row" + row_index +
"')\" /> <input id='edit" + row_index + "' type='button' value='修改' onclick=\"editRow('row" + row_index +
"')\" />";
}
function delRow(rowId) {
var row = document.getElementById(rowId).rowIndex; //删除行所在表格中的位置
document.getElementById("order").deleteRow(row);
}
function editRow(rowId) {
var row = document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col = document.getElementById(rowId).cells;
var text = col[1].innerHTML;
col[1].innerHTML = "<input name='num" + row + "' style='width:40px;' type='text' value='" + text + "' />";
col[3].lastChild.value = "确定";
col[3].lastChild.setAttribute("onclick", "upRow('" + rowId + "')");
/*col[3].innerHTML="<input name='del"+row+"' type='button' value='删除' onclick=\"delRow('"+rowId+ "')\" /> <input id='edit"+row+"' type='button' value='确定' onclick=\"upRow('"+rowId+ "')\" />" */
}
function upRow(rowId) {
var row = document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col = document.getElementById(rowId).cells;
var text = col[1].firstChild.value;
col[1].innerHTML = text;
col[3].lastChild.value = "修改";
col[3].lastChild.setAttribute("onclick", "editRow('" + rowId + "')");
/*col[3].innerHTML="<input name='del"+row+"' type='button' value='删除' onclick=\"delRow('"+rowId+ "')\" /> <input id='edit"+row+"' type='button' value='修改' onclick=\"editRow('"+rowId+ "')\" />"*/
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="order">
<tr class="title">
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr id="del1">
<td>防滑真皮休闲鞋</td>
<td>12</td>
<td>¥568.50</td>
<td><input name="rowdel" type="button" value="删除" onclick='delRow("del1")' />
<input id="edit1" type="button" value="修改" onclick='editRow("del1")' />
</td>
</tr>
<tr>
<td colspan="4" style="height:30px;">
<input name="addOrder" type="button" value="增加订单" onclick="addRow()" />
</td>
</tr>
</table>
</body>
</html>
4.表格操作的最终代码：
</style>
<script type="text/javascript">
function addRow(){
var addTable=document.getElementById("order");
var row_index=addTable.rows.length-1; //新插入行在表格中的位置
var newRow=addTable.insertRow(row_index); //插入新行
newRow.id="row"+row_index; //设置新插入行的ID
var col1=newRow.insertCell(0);
col1.innerHTML="<input id='a"+row_index+"' style='width:160px;' type='text' />";
var col2=newRow.insertCell(1);
col2.innerHTML="<input id='b"+row_index+"' style='width:30px;' type='text' />";
var col3=newRow.insertCell(2);
col3.innerHTML="<input id='c"+row_index+"' style='width:30px;' type='text' />";
var col4=newRow.insertCell(3);
col4.innerHTML="<input name='del"+row_index+"' type='button' value='删除' onclick=\"delRow('row"+row_index+ "')\" /> <input id='edit"+row_index+"' type='button' value='确定' onclick=\"upRow('row"+row_index+ "')\" />";
}
function delRow(rowId){
var row=document.getElementById(rowId).rowIndex; //删除行所在表格中的位置
document.getElementById("order").deleteRow(row);
}
function editRow(rowId){
var row=document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col=document.getElementById(rowId).cells;
var texta=col[0].innerHTML;
col[0].innerHTML="<input name='a"+row+"' style='width:160px;' type='text' value='"+texta+"' />";
var textb=col[1].innerHTML;
col[1].innerHTML="<input name='b"+row+"' style='width:30px;' type='text' value='"+textb+"' />";
var textc=col[2].innerHTML;
col[2].innerHTML="<input name='b"+row+"' style='width:30px;' type='text' value='"+textc+"' />";
col[3].lastChild.value="确定";
col[3].lastChild.setAttribute("onclick","upRow('"+rowId+ "')");
}
function upRow(rowId){
var row=document.getElementById(rowId).rowIndex; //修改行所在表格中的位置
var col=document.getElementById(rowId).cells;
var texta=col[0].firstChild.value;
var textb=col[1].firstChild.value;
var textc=col[2].firstChild.value;
col[0].innerHTML=texta;
col[1].innerHTML=textb;
col[2].innerHTML=textc;
col[3].lastChild.value="修改";
col[3].lastChild.setAttribute("onclick","editRow('"+rowId+ "')");
}
</script>
</head>
<body><table width="100%" border="0" cellspacing="0" cellpadding="0" id="order">
<tr class="title">
<td>商品名称</td>
<td>数量</td>
<td>单价</td>
<td>操作</td>
</tr>
<tr id="row1">
<td>玫瑰保湿睡眠面膜</td>
<td>5</td>
<td>¥48</td>
<td><input name="del" type="button" value="删除" onclick="delRow('row1')" />
<input name="edit" type="button" value="修改" onclick="editRow('row1')" /></td>
</tr>
<tr>
<td style="text-align:center; height:30px;" colspan="4">
<input name="bsn" type="button" value="增加定单" onclick="addRow()" /></td>
</tr>
</table>
</body>
</html>
5.图片的轮换：
</style>
<script type="text/javascript">
function change(dd){
var p=document.getElementById("photo");
p.src="images/"+dd;
}
</script>
</head>
<body>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="height:190px;"><div id="apDiv1">
<a href="javascript:change('1.gif')">1</a>
<a href="javascript:change('2.gif')">2</a>
<a href="javascript:change('3.jpg')">3</a>
<a href="javascript:change('4.jpg')">4</a>
<a href="javascript:change('5.gif')">5</a>
</div>
<img src="images/1.gif" alt="í???" id="photo"/></td>
</tr>
</table>
</body>
</html>
|