Jquery 实现可编辑的table

最新推荐文章于 2024-08-19 09:55:05 发布

lovoo

最新推荐文章于 2024-08-19 09:55:05 发布

阅读量2.8k

点赞数

分类专栏： # JQuery 文章标签： jquery bootstrap bootstrap

本文链接：https://blog.csdn.net/lovoo/article/details/53165904

版权

JQuery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<%@ 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>