jq实现可以编辑的表格

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery:可以编辑的表格</title>
    <link type="text/css" rel="stylesheet" href="css/editTable.css">
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/editTable.js"></script>
</head>
<body>

<table>
    <thead>
    <tr>
        <th colspan="2">鼠标点击表格可以编辑</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th>学号</th>
        <th>姓名</th>
    </tr>
    <tr>
        <td>00001</td>
        <td>张3</td>
    </tr>
    <tr>
        <td>00002</td>
        <td>李4</td>
    </tr>
    <tr>
        <td>00003</td>
        <td>王5</td>
    </tr>
    <tr>
        <td>00004</td>
        <td>赵6</td>
    </tr>
    </tbody>
</table>

</body>
</html>



editTable.js文件

//通过javascript来解决内容部分的奇偶行背景不同
/*
 $(document).ready(function(){

 });*/
//简化写法
$(function() {
    //找到表格的内容区域的奇数行,设定其样式
    $("tbody tr:even").css("background-color", "#ECE9D8");
    //找到所有学号的单元格
    var numTd = $("tbody td:even");
    //给这些单元格注册鼠标点击的事件。
    numTd.click(function() {
        //找到当前的td,this对应的就是相应可cilck的那个td
        var tdObj = $(this);
        if(tdObj.children("input").length()>0){
            //表示里面是有input的文本框,不执行click处理
            return false;
        }
        //取出当前td中的文本值
        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.get(0).select();
        inputObj.click(function(){
           return false; 
        });
        //处理文本框上回车和ESC按键的操作
        inputObj.keyup(function(event){
            //获取当前按键下的键值
            var keycode = event.which;
           //处理回车的情况
            if(keycode == 13){
              //获取当前文本框中的内容
                var inputtest = $(this).val();
                tdObj.html(inputtest);
            }
           //处理esc的情况
             if(keycode == 27){
              tdObj.html(text);
            }
        });
    });
});

你可能感兴趣的:(JavaScript,java,function,input,stylesheet)