Heim >Web-Frontend >HTML-Tutorial >js实现动态操作table_html/css_WEB-ITnose
js实现动态操作table_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:341183Durchsuche
本章案例为通过js，动态操作table，实现在单页面进行增删改查的操作。
简要案例如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><%@page import="java.util.Date"%><c:set var="ctx" value="${pageContext.request.contextPath}" /><!DOCTYPE html><html><head><script type="text/javascript">function addOrder() { document.getElementById('hiddtr').style.display="table-row"; window.location="#hiddtr";}function cancel(){ document.getElementById('hiddtr').style.display="none";}function modify(ele){ var tr = $(ele).closest("tr"); var name = tr.find("input[name='name']"); var age = tr.find("input[name='age']"); if(name.val()==""){ alert("姓名不能为空"); return ; } if(age.val()==""){ alert("年龄不能为空"); return ; } if(!confirm("确认修改？")){ return; } $.ajax({ type: "POST", url: "${ctx}/user/update", dataType:"json", data: {name : name.val(),age:age.val()}, success: function(json){ if(json.msg=='success'){ alert("修改成功！"); }else{ alert(json.msg) } $(ele).attr("disabled",false); } });}function deleteObj(ele,id){ if(confirm("确定要删除吗？")){ var url="${ctx}/user/delete/"+id; $.ajax({ type: "POST", url: url, dataType:"json", success: function(json){ if(json.msg=='success'){ alert("删除成功！"); $(ele).closest("tr").remove(); }else{ alert(json.msg) } $(ele).attr("disabled",false); } }); }}function classSubmit(ele){ var tr= $(ele).closest("tr"); var name = tr.find("input[name='name']"); var age = tr.find("input[name='age']"); if(name.val()==""){ alert("姓名不能为空"); return ; } if(age.val()==""){ alert("年龄不能为空"); return ; } $("#addForm").submit();}</script></head><body> <button type="button" id="addOrder" onclick="addOrder()" >添加</button> <table id="table"> <thead> <tr> <th>id</th> <th>name</th> <th>age</th> <th></th> </tr> </thead> <tbody> <tr> <td>${(page.currPage-1) *page.pageSize+status.count}<input type="hidden" name="edId" value="${obj.id}"/></td> <td><input type="text" name="eqSn" value="${obj.name}"/></td> <td><input type="text" name="depPath" value="${obj.age}"/></td> <td><span onclick="deleteObj(this,'${obj.id}');">删除</span><span onclick="modify(this);">修改</span></td> </tr> <c:forEach var="obj" items="${list}" varStatus="status"> <tr> <td>${(page.currPage-1) *page.pageSize+status.count}<input type="hidden" name="edId" value="${obj.id}"/></td> <td><input type="text" name="eqSn" value="${obj.name}"/></td> <td><input type="text" name="depPath" value="${obj.age}"/></td> <td><span onclick="deleteObj(this,'${obj.id}');">删除</span><span onclick="modify(this);">修改</span></td> </tr> </c:forEach> <form action="${ctx}/user/add" method="post" id="addForm"> <tr style="display: none;" id="hiddtr"> <td></td> <td><input type="text" value="" name="name"/></td> <td><input type="text" value="" name="age" ></td> <td><input type="button" value="提交" onclick="classSubmit(this);return false;"><br /> <input type="button" value="取消" onclick="cancel()"></td> </tr> </form> </tbody> </table></body></html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jsp关于过滤器顺序的乱码问题_html/css_WEB-ITnoseNächster Artikel：text-align的作用对象是什么_html/css_WEB-ITnose