> 웹 프론트엔드 > HTML 튜토리얼 > js实现动态操作table_html/css_WEB-ITnose

js实现动态操作table_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:31:34
원래의
1183명이 탐색했습니다.

    本章案例为通过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;"><br />            <input type="button" value="取消" onclick="cancel()"></td>                </tr>            </form>        </tbody>    </table></body></html>
로그인 후 복사

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿