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

js实现动态操作table的更多相关文章

  1. 使用 JS 来动态操作 css ，你知道几种方法？

    JavaScript 可以说是交互之王,它作为脚本语言加上许多 Web Api 进一步扩展了它的特性集,更加丰富界面交互的可操作性.这类 API 的例子包括WebGL API.Canvas API.D ...

  2. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  3. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  4. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  5. js 操作table: insertRow()，deleteRow()，insertCell()，deleteCell()方法

    表格有几行: var trCnt = table.rows.length;  (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++)              ...

  6. 第十三篇 JS 操作table表格

    JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...

  7. js基础例子动态创建table实例

    <style> table{ width:500px; font-weight: bold; border: 1px solid #000; border-collapse:collaps ...

  8. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  9. MiniUI动态添加table表格

    本文将介绍一下,如何用Jquery MiniUi动态添加一行table表格 1.效果展示 ↓ 2.具体代码 <script type="text/javascript"> ...

随机推荐

  1. webapp应用---cordova.js 3.7.0插件安装总结

    今天是2014年的最后一天,年终总结什么的就不写了.记录一下今天的工作内容.如果不知道phoneGap,那么就不需要往下看了,phoneGap现在已经叫cordova了,叫什么不重要,重要的是它对we ...

  2. GCD－两个网络请求同步问题

    在网络请求的时候有时有这种需求 两个接口请求数据,然后我们才能做最后的数据处理.但是因为网络请求是移步的 .我们并不知道什么时候两个请求完成 . 通常面对这样的需求会自然的想到 多线程 啊 .表现真正 ...

  3. Microsoft Message Analyzer （微软消息分析器，“网络抓包工具 - Network Monitor”的替代品）官方正式版现已发布

    来自官方日志的喜悦 被誉为全新开始的消息分析器时代,由MMA为您开启,博客原文写的很激动,大家可以点击这里浏览:http://blogs.technet.com/b/messageanalyzer/a ...

  4. 【NET MVC】View

    通过阅读一些书籍,结合源代码,稍微深入的学习了Asp.Net MVC中的视图View 任何类型的响应都可以利用当前HttpResponse来响应,MVC可以通过Controller的Response属 ...

  5. RAC某节点启动遭遇ORA-01105，ORA-01606

    环境:RHEL6.5 + Oracle11.2.0.4 双节点RAC 故障现象:节点1实例没有启动成功,节点2正常启动. 1.故障现象 2.解决过程 3.总结 1.故障现象 尝试启动RAC 节点1,遭 ...

  6. 如何用easyui+JAVA 实现动态拼凑datagrid表格

    先给大家看一看效果,最近一段时间都在研究这个东西. 如果我把日期间隔选宽呢?比如5月日到5月5日?下面给大家看看效果,不用担心哦 看到了吧,哈哈,这个日期都是动态生成的,下面就来跟大家分享一下这个的实 ...

  7. JS查找数组中出现的位置及个数

    查找某个值在数组中出现的位置 var attr = [1,4,5,3,2,7,6,9]; var zhao = 8; var sy = -1; for(var i=0;i<attr.length ...

  8. Java操作Sqlite数据库-jdbc连接

    Java操作Sqlite数据库步骤: 1. 导入Sqlite jdbc 本文使用sqlite-jdbc-3.7.2.jar,下载地址 http://pan.baidu.com/s/1kVHAGdD 2 ...

  9. TCP滑动窗口机制

    我们可以大概看一下上图的模型: 首先是AB之间三次握手建立TCP连接.在报文的交互过程中,A将自己的缓冲区大小(窗口大小)3发送给B,B同理,这样双方就知道了对端的窗口大小. A开始发送数据,A连续发 ...

  10. Ionic2学习笔记（10）：扫描二维码

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016     说明: 在本文发表的时候(2016-06-1 ...