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>

相关阅读:
python 并发编程多线程 event
python 并发编程多线程定时器
 python 并发编程多线程信号量
 linux top 查看CPU命令
 python 并发编程多线程 GIL与多线程
 python 并发编程多线程死锁现象与递归锁
 python 并发编程多线程 GIL与Lock
python GIL全局解释器锁与互斥锁目录
 python 并发编程多线程 GIL全局解释器锁基本概念
 执行python程序出现三部曲
原文地址：https://www.cnblogs.com/sky-/p/5069444.html