<!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">
form{ text-align:center; margin:0 auto;}
table{ width:500px;
border-top:1px solid #0099FF;
border-left:1px solid #0099FF;
margin:0 auto;
}
td{ border-right:1px solid #0099FF;
border-bottom:1px solid #0099FF;
text-align:center;
}
.menu{ font-weight:bold;
background:#CCCCCC;
line-height:30px;
}
</style>
<script type="text/javascript">
function addRow(){//新增方法
var addTable = document.getElementById("order");
var rowIndex = addTable.rows.length-2;
var newRow = addTable.insertRow(rowIndex);
newRow.id = "row"+rowIndex;
var col_0 = newRow.insertCell(0);
col_0.innerHTML = "<input type='text' style='width:160px' id='a"+rowIndex+"' />";
var col_1 = newRow.insertCell(1);
col_1.innerHTML = "<input type='text' style='width:80px' id='b"+rowIndex+"'/>";
var col_2 = newRow.insertCell(2);
col_2.innerHTML = "<input type='text' style='width:80px' id='c"+rowIndex+"'/>";
var col_3 = newRow.insertCell(3);
col_3.innerHTML = "<input type='button' value='保存' οnclick=\"stroeRow('row"+rowIndex+"')\"/><input type='button' value='删除' οnclick=\"delRow('row"+rowIndex+"')\"/>";
}
function delRow(rowId){//删除方法
var index = document.getElementById(rowId).rowIndex;
document.getElementById("order").deleteRow(index);
}
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:80px' type='text' value='"+textb+"' />";
var textc = col[2].innerHTML;
col[2].innerHTML = "<input name='c"+row+"' style='width:80px' type='text' value='"+textc+"' />";
col[3].firstChild.value="保存";
col[3].firstChild.setAttribute("onclick","stroeRow('"+rowId+"')");
}
function stroeRow(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].firstChild.value = "修改";
col[3].firstChild.setAttribute("onclick","editRow('"+rowId+"')");
}
</script>
</head><body>
<form method="post"><h2>图书管理系统</h2>
<table width=100% border="0" cellspacing="0" cellpadding="0" id="order">
<tr class="menu">
<td width="170">图书名称</td>
<td width="90">图书价格</td>
<td width="90">图书数量</td>
<td width="145">操作</td>
</tr>
<tr>
<td colspan="4"><input type="button" name="btn" id="add" value="新增图书"/ οnclick="addRow()"></td>
<tr>
</table>
</form>
</body>
</html>
javascript实现后台图书管理增加、修改、删除功能
最新推荐文章于 2024-04-22 01:15:00 发布