本章案例为通过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. 在C#中使用Spire.doc对word的操作总结

    在C#中使用Spire.doc对word的操作总结 在最近的工程中我们要处理一些word文档.通过在网上的大量搜索,我发现大多数软件功能不是不完整就是有重复.极少数可以完全实现的word组件又要收费. ...

  2. iOS - 类扩展与分类的区别

    类扩展 (Class Extension也有人称为匿名分类) 作用: 能为某个类附加额外的属性,成员变量,方法声明 一般的类扩展写到.m文件中 一般的私有属性写到类扩展 使用格式: @interfac ...

  3. 倾情大奉送--Spark入门实战系列

    这一两年Spark技术很火,自己也凑热闹,反复的试验.研究,有痛苦万分也有欣喜若狂,抽空把这些整理成文章共享给大家.这个系列基本上围绕了Spark生态圈进行介绍,从Spark的简介.编译.部署,再到编 ...

  4. canvas实现拖动页面时显示窗口视频

    简介 当前主流的视频网站目前有不少新鲜好玩的功能,最明显的莫过于小视频的显示--当视频不在当前视口范围 时,会在右下角用一个小窗口来显示当前的视频,而且可以拖拽. 今晚心血来潮,起了动手试试的念头.我 ...

  5. WebGIS中GeoHash编码的研究和扩展

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 1.1普通地理编码流程 将采集的POI入库后,数据库里保存有 ...

  6. APP接口自动化测试JAVA+TestNG(三)之HTTP接口测试实例

    前言     前两篇普及相关基础知识后,本篇主要对举例对国家气象局接口自动化测试进行讲解(Get请求及结果断言),以达到自动化测试入门目的,除了前两篇的一些了解外,需要有一定的JAVA知识(HTTP相 ...

  7. jQuery-1.9.1源码分析系列（二）jQuery选择器

    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

  8. .NET 对象生命周期

    GC 垃圾回收      .NET Framework 的垃圾回收器管理应用程序的内存分配和释放.每次您使用 new 运算符创建对象时,运行库都从托管堆为该对象分配内存.只要托管堆中有地址空间可用,运 ...

  9. .Net调用R语言

    ///加载自己写的R语言算法库 public List<double> GetZTFB(double[] data) { List<double> par = new List ...

  10. XmlReader和XElement组合之读取大型xml文档

    简介 在.NET framework 中存在大量操作xml数据的类库和api,但在.NET framework 3.5后我们的首选一般就是linq to xml. linq to xml操作xml数据 ...