Jquery 实现可编辑的table

来源：互联网发布：数据加载中请稍候... 编辑：程序博客网时间：2024/04/29 10:21
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@ taglib prefix="s" uri="/struts-tags"%><!DOCTYPE html><html><head><title>Bootstrap 模板</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/bootstrap/css/bootstrap.css" /><link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/script/bootstrap/css/bootstrap-responsive.css" /><script src="${pageContext.request.contextPath}/script/jquery.js"></script><!--[if lt IE 9]>         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>      <![endif]-->      <style type="text/css">       table {border-collapse: collapse;}      </style>      <script type="text/javascript">        $(function(){            //$("tbody tr:odd").css("backgroud-color","#333");            $("tbody tr:even").css("backgroud-color","#333");            $("tbody td:even").css("backgroud-color","#333");            var numId = $("tbody td:even");            numId.click(function(){                //alert($(this).index);                var inputObj = $("<input type = 'text'/>")                var tdObj = $(this);                if(tdObj.children("input").length>0){                    return false;//当前td中有input,不处理下面的内容                }                var text = tdObj.html();                inputObj.css("border-width","0px")                .width(tdObj.width())                .css("font-size","16px")                .css("background-color",tdObj.css("background-color"))                .val(text);                //清空内容                tdObj.html("");                //添加到td                inputObj.appendTo(tdObj);                //选中                //inputObj.get(0).select();                inputObj.trigger("focus").trigger("select");                //取消事件                inputObj.click(function(){                    return false;                });                inputObj.keyup(function(){                    var keycode = event.which;                    if(keycode == 13){//回车                        var content = $(this).val();                        tdObj.html(content);                      }                    if(keycode == 27){                        //还原内容                       tdObj.html(text);                                        }                });            });        });      </script></head>    <body>    <script src="${pageContext.request.contextPath}/script/bootstrap/js/bootstrap.js"></script>        <div class="container">            <h1>可编辑的表格</h1>            <div class="row">             <table class="table table-bordered table-striped" >                <thead>                    <tr>                        <th>学号</th>                        <th>姓名</th>                        <th>年龄</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td>n1000</td>                        <td>tom</td>                        <td>20</td>                    </tr>                    <tr>                        <td>n2000</td>                        <td>tom</td>                        <td>21</td>                    </tr>                    <tr>                        <td>n3000</td>                        <td>tom</td>                        <td>22</td>                    </tr>                </tbody>             </table>            </div>        </div>    </body></html>
0 0