js实现动态操作table_html/css_WEB-ITnose-HTML Tutorial-php.cn

js实现动态操作table_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:31:34

Original

1131 people have browsed it

　本章案例为通过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>

Copy after login