码了吗 2013-04-02 17:03 采纳率: 0%
浏览 300
已采纳

怎么在一个同一个jsp上面做个简单的增删改查？

我是新人，公司要求在同一个页面上做增删改查，查找和删除已经做出来了，添加和修改以前在不同的页面知道怎么做，但是同一个页面就不知道如何做，希望大家给个简单的例子，谢谢！
我想着能不能做个添加的按钮，点击添加的时候在同一个页面的上方显示出添加的东西，然后提交，那个地方就关闭！

  • 写回答

4条回答 默认 最新

  • yunzhu666 2013-04-03 09:17
    关注

    下面是一个简单的通过JS动态操作表格的Demo，就是在一个页面上进行增删改查的功能，你把代码帖到一个.html文件里面用浏览器打开就可以看到效果了。

    真实的实现中，把那些简单的JS操作改成Ajax操作就行了。

    实现原理：
    每行数据后面加一个编辑和删除按钮，按钮提交到后台并且带有此行数据的主要参数。
    点击编辑按钮，通过JS操作DOM将此行的每一列替换为一个文本框并把已有的值带进去，后面一个提交按钮通过Ajax提交数据并将文本框重新变为表格的单元格。
    新增，就像编辑一样，添加一行，全部是文本框。。。

    PS：如果你的项目使用ExtJS，那么就更简单了，Ext就提供了可编辑表格，可以很轻松地实现你要的功能。

    [code="html"]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    用DOM动态控制表格

    counter = 1; // 插入数据 function insertData() { var oStudentsTable = document.getElementById("students"); var oTrHang = oStudentsTable.insertRow(oStudentsTable.rows.length); //插入一行 var aText = new Array(); aText[0] = document.createTextNode("王" + (counter++)); aText[1] = document.createTextNode("B072"); aText[2] = document.createTextNode("女"); aText[3] = document.createTextNode("1025"); aText[4] = document.createTextNode("13663616963"); for(var i=0; i<aText.length; i++) { var oTd = oTrHang.insertCell(i); //插入一个单元格 oTd.appendChild(aText[i]); } } // 编辑单元格数据 function editData() { var oTable = document.getElementById("students"); oTable.rows[1].cells[0].innerHTML += "Chf"; } //添加删除数据的列 function insertDeleteCell() { var oTable = document.getElementById("students"); var oTh = oTable.rows[0].insertCell(oTable.rows[0].cells.length); oTh.innerHTML = "<font style='font-weight: bold;'>操作</font>"; for(var i=1; i<oTable.rows.length; i++) { var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length); oTd.innerHTML = "<a href='#' onclick='myDeleteRow(this)'>Delete</a>"; } } //添加拥有一个输入框的列 function insertInputCell() { var oTable = document.getElementById("students"); var oTh = oTable.rows[0].insertCell(oTable.rows[0].cells.length); oTh.innerHTML = "<font style='font-weight: bold;'>输入</font>"; for(var i=1; i<oTable.rows.length; i++) { var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length); oTd.innerHTML = "<input type=\"text\" style=\"background:#C0F2F3;margin-left:8px;width:10px;height:10px;\" />" } } //删除行 function myDeleteRow(theDel) { theDel.parentNode.parentNode.parentNode.removeChild(theDel.parentNode.parentNode); } //删除所有行 function deleteAllRows() { var studentsTable = document.getElementById("students"); while(studentsTable.rows.length > 1) { studentsTable.deleteRow(studentsTable.rows.length - 1); } } //对表格的行进行排序 function sortByBirthday() { var studentsTable = document.getElementById("students"); // 获取所有学生数据行 /** var studentsRowsData = new Array(); for(var i=1; i<studentsTable.rows.length; i++) { // 以这种方式获取表格的所有行，但是通过deleteRow方法删除表格的行，会导致获取的行成为空行<tr></tr> // studentsRowsData[i-1] = studentsTable.rows[i]; } **/ var studentsRows = new Array(); for(var i=1; i<studentsTable.rows.length; i++) { studentsRows[i-1] = studentsTable.rows[i]; } // ---------- 排序 Begin ---------- for(var i=0; i<studentsRows.length-1; i++) { for(var j=i+1; j<studentsRows.length; j++) { var iBirth = Number(studentsRows[i].cells[3].firstChild.nodeValue); var jBirth = Number(studentsRows[j].cells[3].firstChild.nodeValue); if(iBirth > jBirth) { var temp = studentsRows[i]; studentsRows[i] = studentsRows[j]; studentsRows[j] = temp; } } } // ---------- 排序 End ---------- /** // 删除表格中的所有学生数据行，保留行首 while(studentsTable.rows.length > 1) { studentsTable.deleteRow(studentsTable.rows.length - 1); } **/ var studentsSortedTable = document.getElementById("students_sorted"); // 先清空存放排序后学生信息的表格 while(studentsSortedTable.rows.length > 1) { studentsSortedTable.deleteRow(studentsSortedTable.rows.length - 1); } for(var i=0; i<studentsRows.length; i++) { var newRow = studentsSortedTable.insertRow(studentsSortedTable.rows.length); var sortedCells = studentsRows[i].cells; for(var j=0; j<sortedCells.length; j++) { var newCell = newRow.insertCell(newRow.cells.length); newCell.innerHTML = sortedCells[j].innerHTML; } } studentsSortedTable.style.display = "inline"; } 
    <h3>用DOM动态控制表格</h3>
<input type="button" onclick="insertData()" value="插入一行数据" />
<input type="button" onclick="editData()" value="修改单元格数据" />
<input type="button" onclick="insertDeleteCell()" value="动态添加删除列" />
<input type="button" onclick="insertInputCell()" value="动态添加输入框列" />
<input type="button" onclick="deleteAllRows()" value="删除所有行保留行首" />
<input type="button" onclick="sortByBirthday()" value="按生日进行排序" />
<p></p>

<table id="students" border="1">
  <caption>
    <h3>学生列表</h3>
  </caption>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">学号</th>
    <th scope="col">性别</th>
    <th scope="col">生日</th>
    <th scope="col">联系方式</th>
  </tr>
  <tr>
    <td>陈</td>
    <td>B073</td>
    <td>男</td>
    <td>1126</td>
    <td>15915554615</td>
  </tr>
  <tr>
    <td>王</td>
    <td>B071</td>
    <td>女</td>
    <td>0304</td>
    <td>13054115694</td>
  </tr>
  <tr>
    <td>曹</td>
    <td>B070</td>
    <td>男</td>
    <td>0815</td>
    <td>1381377894</td>
  </tr>
  <tr>
    <td>郑</td>
    <td>B078</td>
    <td>男</td>
    <td>1019</td>
    <td>1322377896</td>
  </tr>
</table>
<p></p>
<table id="students_sorted" border="1" style="display:none">
  <caption>
    <h3>排序后的学生列表</h3>
  </caption>
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">学号</th>
    <th scope="col">性别</th>
    <th scope="col">生日</th>
    <th scope="col">联系方式</th>
  </tr>
</table>



    [/code]

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

悬赏问题

  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字？
  • ¥100 求三轴之间相互配合画圆以及直线的算法
  • ¥100 c语言，请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发