本章案例为通过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. iOS对象属性详解

    oc对象的一些属性: retain,strong, copy,weak,assign,readonly, readwrite, unsafe_unretained 下面来分别讲讲各自的作用和区别: r ...

  2. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  3. 【Android】直播必备之YUV使用总结 —— Android常用的几种格式：NV21/NV12/YV12/YUV420P的区别

    说明 因工作方面接触到图像处理这一块,需要对手机摄像头采集的原始帧做Rotate或者Scale,但无奈对此的了解少之又少,于是网上搜了一顿,完事后将最近所学总结一下,以方便之后的人别踩太多坑. 首先想 ...

  4. iOS 商品倒计时 限时特价 限时优惠 功能的封装

    最近项目中多个页面用到了 商品特价倒计时的功能  为了偷懒 于是自己封装了一个限时抢购 倒计时的view 代码实现如下: 定向价 限时特价 模型代码实现: #pragma mark 商品定向价模型 @ ...

  5. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

  6. JavaScript的作用域和块级作用域概念理解

    作用域 作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期.说到这里我们需要理解两个概念:块级作用域与函数作用域. 函数作用域 这个应该好理解,函数作用域就是说定义在 ...

  7. Android Lint Checks

    Android Lint Checks Here are the current list of checks that lint performs as of Android Studio 2.3 ...

  8. 【C#进阶系列】23 程序集加载和反射

    程序集加载 程序集加载,CLR使用System.Reflection.Assembly.Load静态方法,当然这个方法我们自己也可以显式调用. 还有一个Assembly.LoadFrom方法加载指定路 ...

  9. 使用NPOI读取Excel到DataTable

    一.NPOI介绍: 使用 NPOI 你就可以在没有安装 Office 或者相应环境的机器上对 WORD/EXCEL 文档进行读写.NPOI是构建在POI 3.x版本之上的,它可以在没有安装Office ...

  10. 【转】acm小技巧

    1.一般用c语言节约空间,要用c++库函数或STL时才用c++: cout.cin和printf.scanf最好不要混用. 大数据输入输出最后不用cin.cout,纺织超市. 2.有时候int型不够用 ...