本章案例为通过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. 如何在Windows Server 2008 上添加RD （远程桌面）会话主机配置的远程桌面授权服务器

    在Windows Server系列的现存活跃产品中都默认的会开放两个随机附送的远程控制的授权,而一些特殊条件下我们需要启用多个远程终端连接,在购买了相应的授权之后,我们如何将配置好的服务器添加到远程桌 ...

  2. 原生JS实现jquery的链式编程。

    这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...

  3. ReactJS分析之入口函数render

    前言 在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给浏览器,进而进行layout和paint等步骤,这个函数就是React.render() ...

  4. 相克军_Oracle体系_随堂笔记001-概述

    一.Oracle官方支持 1.在线官方文档 http://docs.oracle.com/ 2.metalink.oracle.com,如今已经改成:http://support.oracle.com ...

  5. Linux使用lvresize扩展或缩减lv大小

    环境:CentOS 6.7 一.新建并挂载目录 /u01 和 /data 1.创建目录挂节点/u01,/data mkdir -p /{u01,data} 2.创建lv,名称是lv_u01,大小10g ...

  6. Android APP压力测试(三)之Monkey日志自动分析脚本

    Android APP压力测试(三) 之Monkey日志自动分析脚本 前言 上次说要分享Monkey日志的分析脚本,这次贴出来分享一下,废话不多说,请看正文. [目录] 1.Monkey日志分析脚本 ...

  7. TCP三次握手，四次挥手

    前言 在面试的过程中,TCP的传输协议经常会出现.以前我参加面试的过程中就被问到过,现在轮到我面试其他人的时候,我也会问一些相关的问题.作为一名开发者,无论使用什么样的开发语言,最基本的网络知识一定要 ...

  8. MVC学习系列12---验证系列之Fluent Validation

    前面两篇文章学习到了,服务端验证,和客户端的验证,但大家有没有发现,这两种验证各自都有弊端,服务器端的验证,验证的逻辑和代码的逻辑混合在一起了,如果代码量很大的话,以后维护扩展起来,就不是很方便.而客 ...

  9. 强大的自适应jQuery焦点图特效

    jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...

  10. linux系统下make & make install

    make,make install都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤. make是用来编译的,在命令行输入make命令之后,系统会在当前目录下搜索Makefi ...