JQuery小表格

时间 2019-12-09

标签 jquery 表格栏目 JQuery 繁體版

原文原文链接

啊哈，初学JQuery，闲来无事，好奇表格的编辑功能怎么用最简单的方法实现哇javascript

因而乎！！！css

index.htmlhtml

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>能够编辑的表格</title>
    <link rel="stylesheet" type="text/css" href="css/editTable.css">
    <!-- <script type="text/javascript" src="jquery-3.2.1.min.js"></script> -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/editTable.js"></script>

</head>
<body>
    <table>
        <thead>
            <t>
                <th colspan="2">   鼠标点击表格项就能够编辑
                </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
            </tr>
            <tr>
                <td>000001</td>
                <td>张三</td>    
            </tr>
            <tr>
                <td>000002</td>
                <td>李四</td>    
            </tr>
            <tr>
                <td>000003</td>
                <td>王五</td>    
            </tr>
            <tr>
                <td>000004</td>
                <td>赵六</td>    
            </tr>
        </tbody>
    </table>
</body>
</html>

editTable.cssjava

table {
    border:1px solid black;
    border-collapse: collapse;
    width:400px;
}

table td {
    border:1px solid black;
    width: 50%;
}

tbody th {
    background-color: #A3BAE9;
}
table th {
    border:1px solid black;
    width: 50%;
}

editTable.jsjquery

$(function (){
    //找到偶数行
    //使用even是为了把经过tbody tr返回的全部tr元素中，
    //在数组里面下标是偶数的元素返回，由于这些才是咱们指望的tbody的奇数行
    $("tbody tr:even").css("background-color","#ECE9D8");
    //须要找到全部的学号单元格
   // $("tbody td:even").css("background-color","red");
    var numTd = $("tbody td:even");
    numTd.click(function(){
      //找到当前鼠标点击的td
       var tdObj = $(this) ;
       if (tdObj.children("input").length > 0) {
           //当前td中input不执行click处理
               return false;
       }
       var text = tdObj.html();
        //清空
       tdObj.html("");
        //建立文本框
        //去掉文本框
        //设置文本框的文字字体为16px
        //使文本框的宽度和td的宽度相同
        //设置文本框的背景色
        //插入以前将当前的内容放到文本框中
       var inputObj=$("<input type='text'>").css("border-width","0")
           .css("font-size","16px")
           .css("background-color",tdObj.css("background-color"))
           .width(tdObj.width()).val(text)
           .appendTo(tdObj);
           //使文本框插入以后就被选中
           //inputObj.get(0).select();//safari浏览器不支持
       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) {
               //将td中的内容还原成text
               tdObj.html(text);
           }
       });
     });
});

总结：数组

1.table中能够包含thead和tbody浏览器

2.表头的内容能够放到th中app

3.能够经过border-collapse:collapse使表格中的单元格的边框合并字体

4.当th上有背景色时会覆盖掉tr的背景色this

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

6.$("tbody tr")能够返回tbody中全部tr节点

7..$("tbody tr:even")能够返回tbody中全部索引值是偶数的tr节点

8.css方法能够用于设定或获取节点的css属性，参数名是css的属性名

9.JQuery的对象内容包含着选择器对应的DOM节点，以数组形式保存

10.get方法能够得到JQuery对象中包含的某一个DOM节点

11.function中的this表明执行这个function的对象

12.$()方法的参数是一个DOM对象时，这个方法至关于把DOM对象转换成JQuery对象

13.children方法能够得到某个节点的子节点，能够制定参数来限制子节点的内容

14.若是选择器返回的JQuery对象中包含多个DOM节点，在这个对象上注册相似click这样的事件时，全部DOM节点都会用于事件

15.html方法能够设置或获取节点的HTML内容

16.val方法能够获取或设置节点的value值

17.$()方法的参数若是是一段正确的HTML文本，则能够建立一个DOM节点，并包装成JQuery对象

18.JQuery 大部分方法都会返回执行这个方法的JQuery对象，所以能够采用链式方法的写法来编写给予JQUERY的代码

19.width方法能够设置或获取某个节点的宽度

20.appendTo方法能够将一个节点追加到另外一个节点全部子节点的后面

21.阻止事件传递可让当前节点的事件返回false

22.trigger方法能够触发某个javascript的事件发生

23.JQuery中某个事件方法的参数function上能够定义一个event的参数，JQuery会屏蔽浏览器的event差别，传给咱们一个可用的event对象

24.JQuery的event对象上有一个which的属性能够得到键盘按键的键值

25.13表示回车键，27表示ESC键