本章案例为通过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. 如何远程备份MySQL binlog

    以前备份binlog时,都是先在本地进行备份压缩,然后发送到远程服务器中.但是这其中还是有一定风险的,因为日志的备份都是周期性的,如果在某个周期中,服务器宕机了,硬盘损坏了,就可能导致这段时间的bin ...

  2. 如何利用脚本实现MySQL的快速部署以及一机多实例的部署

    MySQL有三个版本:二进制,源码包,RPM. 下面讲讲二进制包的安装过程 下载地址: http://dev.mysql.com/downloads/mysql/ 选择Linux-Generic 我这 ...

  3. C# 将excel表格嵌入到Word中

    C# 将excel表格嵌入到Word中 继续开扒,今天要实现的是使用C#将excel表格嵌入到Word中这个功能,将word表格导入到excel中我已经写过了,如有需要可参考我之前的文章,在开始前还有 ...

  4. Generator库co4.6使用及源码分析

    原文链接 http://www.cnblogs.com/ytu2010dt/p/6043947.html co4.x已经抛弃了原来thunk转而结合promise实现. 一:promise proms ...

  5. （九）WebGIS中的矢量查询（针对AGS和GeoServer）

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在第七章里我们知道了WebGIS中要素的本质是UICompo ...

  6. 利用SimpleExpandableListAdapter为ExpandableListActivity提供数据

    首先MainActivity继承自ExpandableListActivity,其中的声明如下: setContentView(R.layout.expandmain); //定义一个:List,该L ...

  7. Android-Universal-Image-Loader 图片异步加载类库的使用

    在博客中看到一篇利用组件进行图片异步加载的文章在此作记录 原文:http://blog.csdn.net/vipzjyno1/article/details/23206387 这个图片异步加载并缓存的 ...

  8. CSS魔法堂：Box-Shadow没那么简单啦:)

    前言  说起box-shadow那第一个想法当然就是用来实现阴影,其实它还能用于实现其他好玩的效果的,本篇就打算说说box-shadow的那些事. 二话不说看效果 3D小球 <style typ ...

  9. [Asp.net 5] Logging-其他日志系统的实现

    Microsoft.Framework.Logging.NLog 使用Nlog扩展日志系统:按照我们上节说的,对于扩展的日志系统都要实现俩个接口ILogger.ILoggerProvider.所以在当 ...

  10. Winform混合式开发框架访问Web API接口的处理

    在我的混合式开发框架里面,集成了WebAPI的访问,这种访问方式不仅可以实现简便的数据交换,而且可以在多种平台上进行接入,如Winform程序.Web网站.移动端APP等多种接入方式,Web API的 ...