怎么在一个同一个jsp上面做个简单的增删改查？ - ITeye问答
我是新人，公司要求在同一个页面上做增删改查，查找和删除已经做出来了，添加和修改以前在不同的页面知道怎么做，但是同一个页面就不知道如何做，希望大家给个简单的例子，谢谢！
我想着能不能做个添加的按钮，点击添加的时候在同一个页面的上方显示出添加的东西，然后提交，那个地方就关闭！
采纳的答案
下面是一个简单的通过JS动态操作表格的Demo，就是在一个页面上进行增删改查的功能，你把代码帖到一个.html文件里面用浏览器打开就可以看到效果了。
真实的实现中，把那些简单的JS操作改成Ajax操作就行了。
实现原理：
每行数据后面加一个编辑和删除按钮，按钮提交到后台并且带有此行数据的主要参数。
点击编辑按钮，通过JS操作DOM将此行的每一列替换为一个文本框并把已有的值带进去，后面一个提交按钮通过Ajax提交数据并将文本框重新变为表格的单元格。
新增，就像编辑一样，添加一行，全部是文本框。。。
PS：如果你的项目使用ExtJS，那么就更简单了，Ext就提供了可编辑表格，可以很轻松地实现你要的功能。
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=gb2312" /&
&title&用DOM动态控制表格&/title&
&script language="javascript"&
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("");
for(var i=0; i&aText. 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:'&操作&/font&";
for(var i=1; i&oTable.rows. 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:'&输入&/font&";
for(var i=1; i&oTable.rows. i++)
var oTd = oTable.rows[i].insertCell(oTable.rows[i].cells.length);
oTd.innerHTML = "&input type=\"text\" style=\"background:#C0F2F3;margin-left:8width:10height:10\" /&"
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. i++)
// 以这种方式获取表格的所有行，但是通过deleteRow方法删除表格的行，会导致获取的行成为空行&tr&&/tr&
// studentsRowsData[i-1] = studentsTable.rows[i];
var studentsRows = new Array();
for(var i=1; i&studentsTable.rows. i++)
studentsRows[i-1] = studentsTable.rows[i];
// ---------- 排序 Begin ----------
for(var i=0; i&studentsRows.length-1; i++)
for(var j=i+1; j&studentsRows. 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] =
// ---------- 排序 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. i++)
var newRow = studentsSortedTable.insertRow(studentsSortedTable.rows.length);
var sortedCells = studentsRows[i].
for(var j=0; j&sortedCells. 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="按生日进行排序" /&
&table id="students" border="1"&
&h3&学生列表&/h3&
&/caption&
&th scope="col"&姓名&/th&
&th scope="col"&学号&/th&
&th scope="col"&性别&/th&
&th scope="col"&生日&/th&
&th scope="col"&联系方式&/th&
&td&陈&/td&
&td&B073&/td&
&td&男&/td&
&td&1126&/td&
&td&王&/td&
&td&B071&/td&
&td&女&/td&
&td&0304&/td&
&td&曹&/td&
&td&B070&/td&
&td&男&/td&
&td&0815&/td&
&td&郑&/td&
&td&B078&/td&
&td&男&/td&
&td&1019&/td&
&table id="students_sorted" border="1" style="display:none"&
&h3&排序后的学生列表&/h3&
&/caption&
&th scope="col"&姓名&/th&
&th scope="col"&学号&/th&
&th scope="col"&性别&/th&
&th scope="col"&生日&/th&
&th scope="col"&联系方式&/th&
楼上的说的对，其实在一个页面做增删改查都很简单。
如果你是springmvc的项目 可参考
楼上说的即可
如果你操作的是对象的话，那就很好办了，input的name值设为对象的属性值就ok了。
若果不是可以判断主键是否为空或0 了，希望有帮助。。
已解决问题
未解决问题javascript 的面试题_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
javascript 的面试题
&&javascript 的面试题
阅读已结束，下载文档到电脑
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩8页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢3被浏览2498分享邀请回答01 条评论分享收藏感谢收起02 条评论分享收藏感谢收起查看更多回答