JQuery（2）

1.基础

table中可以包含thead和tbody
table td{}这种写法表示table中包含所有的td
可以通过border-collapse:collapse这种方式来是表格中的单元格的边框合并
当th上有背景色时，这个th属于的tr上定义的背景色会无效
$(function(){})是$ (document).ready(function(){})的简化写法
$(“tbody tr”)可以返回tbody中的所有tr节点
$(“tbody tr:even”)可以返回tbody中所有索引值是偶数的tr节点
如果选择器返回的jQuery对象中包含多个DOM节点，在这个对象上注册类似click这样的事件时，所有的DOM节点都会用于事件
appendTo方法可以将一个节点追加到另一个节点所有子节点的后面
jQuery的event对象上有一个which的属性可以获得键盘按键的键值

2.实例

    <body>
        <table>
            <thead>
            <tr>
                <th colspan="2">鼠标点击表格项就可以编辑</th>
            </tr>
            </thead>
            <tbody>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                </tr>
                <tr>
                    <th>000001</th>
                    <th>张三</th>
                </tr>
                <tr>
                    <th>000002</th>
                    <th>李四</th>
                </tr>               
            </tbody>
        </table>
    </body>

table{
    border:1px solid black;
    /*修正表格之间的边框不能合并*/
    border-collapse:collapse;
    width:400px
}
table td{
    border:1px solid black;
    width:50%;
}
table th{
    border:1px solid black;
}
body th{
    background-color: #A3BAE9;  
}

$(function(){
    //找到表格内容区域中除了第一个tr以外的所有奇数行
    //使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素放回，因为这些元素，实际上才是我们期望的tbody里面的奇数行
    $("tbody tr:even").css("background-color","#ECE9D8");
    //找到所有的学号单元格
    //$(tbody td).css("background-color","red");
    var numTd=$("tbody td:even");
    //给这些单元格注册鼠标的点击事件
    numTd.click(function(){
        alert('click');
        //创建一个文本框

        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();
        //找到当前的td,this就是响应了click的那个td
        inputObj.val(tdObj.html());
        //清空td中的内容
        tdObj.html("");
        //设置文本框的背景色
        inputObj.css("background-color",tdobj.css("background-color"));

    });
});

3.结果

这里写图片描述

4.小结

感觉挺丑的，奈何自己又做不出漂亮的来（啊偶），我能怎么办啊。

猜你喜欢