首頁 > 開發者 > JavaScript

js實現動態操作table，js動態table

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

js實現動態操作table，js動態table

 　  本章案例為通過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>

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More