你的位置:首页 > 网页设计

[网页设计]js实现动态操作table


    本章案例为通过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;">
            <input type="button" value="取消" onclick="cancel()"></td> </tr> </form> </tbody> </table></body></html>