javascript实现后台图书管理增加、修改、删除功能

来源：互联网发布：随意写软件编辑：程序博客网时间：2024/05/22 13:34

<!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='保存' onclick=\"stroeRow('row"+rowIndex+"')\"/><input type='button' value='删除' onclick=\"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="新增图书"/ onclick="addRow()"></td>
  <tr>
</table>

</form>
</body>
</html>