zoukankan      html  css  js  c++  java
  • JQuery经典小例子——可编辑的表格


    可编辑的表格:

                                 

                                 屏幕剪辑的捕获时间: 2015/8/14 9:16  

     

    HTML代码为:

    <!DOCTYPE html>
    <htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
    <metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <title>JQuery实例二:可编辑的表格</title>
        <link href="Edit.css"rel="stylesheet" />
       
        <scriptsrc="jquery.js"></script>
        <scriptsrc="edit.js"></script>
    </head>
    <body>
        <table >
            <thead >
                <tr >
                    <thcolspan="2">鼠标点击表格项就可以编辑</th>
                </tr>             
            </thead>
            <tbody >
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                </tr>
                <tr>
                    <td>0001</td>
                    <td>张三</td>
                </tr>
                <tr>
                    <td>0002</td>
                    <td>李四</td>
                </tr>
                <tr>
                    <td>0003</td>
                    <td>王五</td>
                </tr>
                <tr>
                    <td>0004</td>
                    <td>赵六</td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>


    CSS代码为:

    body {  
    }
    table{/*标签选择器*/
        border:1px solid black;
        border-collapse:collapse ;/*使边框之间没有空隙*/
        400px;
    }
    table td{
        border:1px solid black;
        50%;
    }
    table th{
        border:1px solid black;
        50%;
    }
    tbody th{
        background-color :#A3BAE9;
     
    }


    JS文件:

    //首先需要通过JS来解决内容部分奇偶行的背景色不同
    //$(document).ready(function () {
     
    //});
    $(function(){
        //找到表格内容中除了第一个tr外所有的奇数行
        $("tbody tr:even").css("background-color","#ECE9D8");
     
        //需要找到所有的学号单元格
        var numTd=$("tbody td:even");
        //给这些单元格注册鼠标点击事件
        //numTd.click(function(){
        //    //创建一个文本框
        //    var inputObj = $("<input type='text'>");
        //    //去掉文本框的边框
        //    inputObj.css("border-width","0");
        //    //设置文本框汇总给的文字字体大小是16px;
        //    inputObj.css("font-size", "16px");
     
        //    //找到当前鼠标点击的td,this 对应的就是响应click的那个td
        //    var tdObj = $(this);
        //    //使文本框的宽度和td的宽度相同
        //    inputObj.width(tdObj.width());
        //    //设置文本框的背景色
        //    inputObj.css("background-color", tdObj.css("background-color"));
     
        //    //将当前td中的内容放到文本框中
        //    inputObj.val(tdObj.html());
     
        //    //清空td中的内容
        //    tdObj.html("");
        //    //将文本框插入td中
        //    inputObj.appendTo(tdObj);
     
     
     
     
     
     
        //另外一种精简的写法
        numTd.click(function () {
     
            //找到当前鼠标低级的td,this对应的就是这个td
            var tdObj = $(this);
            if (tdObj.child("input").length > 0) {
                //如果鼠标点击的是td中的input,不执行click处理
                return false;
            }
            var text=tdObj.html();
            //清空td中的内容
            tdObj.html("");
            //创建一个文本,去掉文本框的边框
            //设置文本框中的文字字体大小为16px;
            //使文本框的宽度和td的宽度相同
            //设置文本框的背景色
            //将td中的内容放到文本框中
            //将文本框插入到td中
            var inputObj=$("<input type='text'>").css("border-width","0")
                          .css("font-size","16px")
                          .width(tdObj.width())
                          .css("background-color",tdObj.css("background-color"))
                          .val(text).appendTo(tdObj);
            //使文本框插入之后就会被选中
            inputObj.trigger("focus").trigger("select");
            inputObj.click(function () {
                return false;
            });
     
     
            //处理文本框的回车和ESC按键确认操作
            inputObj.keyup(function (event) {
                //获取键值
                var keycode = event.which;
                //处理回车的情况
                if (keycode == 13) {
                    //获取当前文本框中的内容
                    var inputtext = $(this).val();
                    //将td的内容修改成文本框中的内容
                    tdObj.html(inputtext);
                }
                //处理ESC的情况
                if (keycode == 27) {
     
                }
            });
        });
    });
    


     知识点小结: 

    1、$(function(){})是$(document).ready(function(){})的简化写法

    2、$("tbodytr")可以返回tbody中的所有tr节点

    3、$("tbodytr:even")可以返回tbody中所有索引值是偶数的tr节点。

    4、CSS方法可以用于设定或获取节点的CSS属性。

    5、JQuery的对象包含着选择器对应的DOM节点,以数组形式保存。

    6、get方法可以获得JQuery对象中包含的某个DOM节点。

    7、$()方法的参数是一个DOM对象时,这个方法相当于把DOM对象转换成JQuery对象。

    8、children方法可以获得某个节点的子节点,可以指定参数来限制子节点的内容

    9、appendTo方法可以将一个节点追加到另一个节点的所有子节点的后面。

    10、trigger方法可以出发某个JS的事件发生。


    总结:

    学到的知识,必须要用一下,纸上得来终觉浅(视频也不行),绝知此事要躬行!

     

  • 相关阅读:
    BFS visit tree
    Kth Largest Element in an Array 解答
    Merge k Sorted Lists 解答
    Median of Two Sorted Arrays 解答
    Maximal Square 解答
    Best Time to Buy and Sell Stock III 解答
    Best Time to Buy and Sell Stock II 解答
    Best Time to Buy and Sell Stock 解答
    Triangle 解答
    Unique Binary Search Trees II 解答
  • 原文地址:https://www.cnblogs.com/DoubleEggs/p/5747172.html
Copyright © 2011-2022 走看看