zoukankan      html  css  js  c++  java
  • 前台特效(3) 编辑表格

    <!DOCTYPE html>
    <html>
        <head>
            <title>编辑表格</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>
            <script>
                $(function(){
                    var off = true;
                    $("#table td").each(function(){
                        $(this).click(function(){
                            if(off){
                                var cont = $(this).html();
                                $(this).html('');
                                $(this).append("<input type='text' id='cont' value='"+cont+"'/>");
                                $("#cont").focus().css("background-color","#ffffcc");
                                off = false;
                            }
                        })
                    });
                    $("#cont").live({blur:function(){
                            $(this).parent().html($(this).val());
                            off = true;
                        },keydown:function(event){
                            if(event.keyCode == 13){
                                $(this).parent().html($(this).val());
                                off = true; 
                            }
                        }});
                })
            </script>
            <style>
                #table{
                    border: solid 3px #cccccc;
                    text-align: center;
                    padding: 5px;
                }
                #table td{
                    width:200px;
                    height:30px;
                    border: solid 3px #cccccc;
                }
            </style>
        </head>
        <body>
            <table id="table">
                <tr>
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                </tr>
                <tr>
                    <td>21</td>
                    <td>22</td>
                    <td>23</td>
                    <td>24</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>31</td>
                    <td>32</td>
                    <td>33</td>
                    <td>34</td>
                    <td>35</td>
                </tr>
                <tr>
                    <td>41</td>
                    <td>42</td>
                    <td>43</td>
                    <td>44</td>
                    <td>45</td>
                </tr>
            </table>
        </body>
    </html>

    基本思路:

    1.点击table的td时触发click时间,获取td内容并赋予新添加的input,删除td的内容,添加input

    2.点击同时,使input获取焦点并改变背景颜色

    3.当input失去焦点或者按下Enter键时,获取input的value,覆盖到td

    希望对你有所帮助! ^_^~

  • 相关阅读:
    学习《MYSQL》课程,日期2017.4.25-2017.4.30
    Netty学习笔记
    WebSocket学习
    Class 泛型
    SAX解析与DOM解析
    HashMap和HashTable的区别
    SQL语句整理
    观察者模式学习
    状态模式学习
    策略模式学习
  • 原文地址:https://www.cnblogs.com/longdidi/p/2952493.html
Copyright © 2011-2022 走看看