JS实现简单的增删改查
<%@ page language="java"import="java.util.*,java.sql.*,com.abin.db.connection.*,java.text.*,com.abin.test.connection.*"pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>增删改查</title> <script type="text/javascript"> // 新增 function trdadd(){ flag=false; document.getElementById("fid").style.display="block"; //控制显示 chongzhi(); document.getElementById("aid").disabled=false; //重新启用 } //保存 function baocun(){ if(flag==false){ add(flag); document.getElementById("fid").style.display="none"; }else{ add(flag); document.getElementById("fid").style.display="none"; } } //重置 function chongzhi(){ document.getElementById("formid").reset(); } //删除 function deleteRow(input){ var s=input.parentNode.parentNode.rowIndex; document.getElementById("tableid").deleteRow(s); var num=document.getElementById("tableid").rows.length; for(var i=1;i<num;i+=1){ table.rows.cells.innerHTML=i; //把每行的每一列设为i } alert("删除成功！！"); } </script></head><body><input type="button" value="新增" ><center><table id="tableid" border="1" cellpadding="0" cellspacing="0" width="100%" ><thead><tr> <td>编号</td> <td>标题</td> <td>摘要</td> <td>作者</td> <td>类别</td> <td align="center" width = "15%">操作</td> </tr> </thead> </table> <br> <br> <br> <div id="fid" style="display : none"> <form id="formid"> <table id=aaid> <tr> <td colspan="6">标题 : <input id="aid" type="text" size="20%"> </td> <td colspan="6">摘要 : <input id="bid" type="text" size="20%"> </td> </tr> <tr> <td colspan="6">作者 : <input id="cid" type="text" size="20%"></td> <td>类型 : <select id="eid" name="myname"> <option value="1">证券</option> <option value="2">体育</option> <option value="3">新闻</option> <option value="4">娱乐</option> <option value="5">八卦</option> </select> </td> </tr> </table> <input type="button" value="保存" > <input type="reset" value="重置" > <!-- 重置type类型必须为reset--> </form> </div> </center> <script type="text/javascript"> //全局变量 var table=document.getElementById("tableid"); var flag=false; var getselectrow; function getNum(){ var haoRow=table.rows; return haoRow.cells.length; } //添加方法 function add(flag){ if(!flag){ // var num=getNum(); var row=table.insertRow(-1); //为-1时往下加（升序），为0时往上加（id降序） var add1=row.insertCell(0); var add2=row.insertCell(1); var add3=row.insertCell(2); var add4=row.insertCell(3); var add5=row.insertCell(4); var add6=row.insertCell(5); add1.innerHTML=document.getElementById("tableid").rows.length-1;//不加-1时id从二开始；原因：标题占一个 add2.innerHTML=document.getElementById("aid").value; add3.innerHTML=document.getElementById("bid").value; add4.innerHTML=document.getElementById("cid").value; var tall=document.getElementById("eid"); var index=tall.selectedIndex;// 当前坐标 var option=tall.options; add5.innerHTML=option.text; add6.innerHTML="<input type='button' value='修改' onclick='updateRow(this)'> <input type='button' value='删除' onclick='deleteRow(this)'>"; //alert(num); alert("添加成功！！"); }else{ var row2=table.rows;//选中当前行 //把修改后的值设置到对应的文本框中 row2.cells.innerHTML=document.getElementById("aid").value; row2.cells.innerHTML=document.getElementById("bid").value; row2.cells.innerHTML=document.getElementById("cid").value; var pall=document.getElementById("eid"); var index=pall.selectedIndex; //当前坐标 var option=pall.options; row2.cells.innerHTML=option.text; alert("修改成功！！"); } } //修改 function updateRow(input){ flag=true document.getElementById("aid").disabled=true; //不能启用 document.getElementById("fid").style.display="block"; var i=input.parentNode.parentNode.rowIndex; getselectrow=i; //得到选中行的内容放到文本框 document.getElementById("aid").value=table.rows.cells.innerHTML; document.getElementById("bid").value=table.rows.cells.innerHTML; document.getElementById("cid").value=table.rows.cells.innerHTML; var select=document.getElementById("eid"); var index=select.selectedIndex;// 当前坐标 var option= select.options; option.text=table.rows.cells.innerHTML; } </script></body></html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head> <title>增删改查</title> <script type="text/javascript"> // 新增 function trdadd(){ flag=false; document.getElementById("fid").style.display="block"; //控制显示 chongzhi(); document.getElementById("aid").disabled=false; //重新启用 } //保存 function baocun(){ if(flag==false){ add(flag); document.getElementById("fid").style.display="none"; }else{ add(flag); document.getElementById("fid").style.display="none"; } } //重置 function chongzhi(){ document.getElementById("formid").reset(); } //删除 function deleteRow(input){ var s=input.parentNode.parentNode.rowIndex; document.getElementById("tableid").deleteRow(s); var num=document.getElementById("tableid").rows.length; for(var i=1;i<num;i+=1){ table.rows.cells.innerHTML=i; //把每行的每一列设为i } alert("删除成功！！"); } </script></head><body><input type="button" value="新增" ><center><table id="tableid" border="1" cellpadding="0" cellspacing="0" width="100%" ><thead><tr> <td>编号</td> <td>标题</td> <td>摘要</td> <td>作者</td> <td>类别</td> <td align="center" width = "15%">操作</td> </tr> </thead> </table> <br> <br> <br> <div id="fid" style="display : none"> <form id="formid"> <table id=aaid> <tr> <td colspan="6">标题 : <input id="aid" type="text" size="20%"> </td> <td colspan="6">摘要 : <input id="bid" type="text" size="20%"> </td> </tr> <tr> <td colspan="6">作者 : <input id="cid" type="text" size="20%"></td> <td>类型 : <select id="eid" name="myname"> <option value="1">证券</option> <option value="2">体育</option> <option value="3">新闻</option> <option value="4">娱乐</option> <option value="5">八卦</option> </select> </td> </tr> </table> <input type="button" value="保存" > <input type="reset" value="重置" > <!-- 重置type类型必须为reset--> </form> </div> </center> <script type="text/javascript"> //全局变量 var table=document.getElementById("tableid"); var flag=false; var getselectrow; function getNum(){ var haoRow=table.rows; return haoRow.cells.length; } //添加方法 function add(flag){ if(!flag){ // var num=getNum(); var row=table.insertRow(-1); //为-1时往下加（升序），为0时往上加（id降序） var add1=row.insertCell(0); var add2=row.insertCell(1); var add3=row.insertCell(2); var add4=row.insertCell(3); var add5=row.insertCell(4); var add6=row.insertCell(5); add1.innerHTML=document.getElementById("tableid").rows.length-1;//不加-1时id从二开始；原因：标题占一个 add2.innerHTML=document.getElementById("aid").value; add3.innerHTML=document.getElementById("bid").value; add4.innerHTML=document.getElementById("cid").value; var tall=document.getElementById("eid"); var index=tall.selectedIndex;// 当前坐标 var option=tall.options; add5.innerHTML=option.text; add6.innerHTML="<input type='button' value='修改' onclick='updateRow(this)'> <input type='button' value='删除' onclick='deleteRow(this)'>"; //alert(num); alert("添加成功！！"); }else{ var row2=table.rows;//选中当前行 //把修改后的值设置到对应的文本框中 row2.cells.innerHTML=document.getElementById("aid").value; row2.cells.innerHTML=document.getElementById("bid").value; row2.cells.innerHTML=document.getElementById("cid").value; var pall=document.getElementById("eid"); var index=pall.selectedIndex; //当前坐标 var option=pall.options; row2.cells.innerHTML=option.text; alert("修改成功！！"); } } //修改 function updateRow(input){ flag=true document.getElementById("aid").disabled=true; //不能启用 document.getElementById("fid").style.display="block"; var i=input.parentNode.parentNode.rowIndex; getselectrow=i; //得到选中行的内容放到文本框 document.getElementById("aid").value=table.rows.cells.innerHTML; document.getElementById("bid").value=table.rows.cells.innerHTML; document.getElementById("cid").value=table.rows.cells.innerHTML; var select=document.getElementById("eid"); var index=select.selectedIndex;// 当前坐标 var option= select.options; option.text=table.rows.cells.innerHTML; } </script></body></html>
http://hi.baidu.com/%C0%B6%C9%AB%D3%C7%D3%F4%BA%C3%B1%A6%B1%B4/blog/item/b1664c97c25031027bf480fd.html
页:
[1]