Ajax学习笔记--------可以编辑的表格

最新推荐文章于 2024-04-12 17:58:57 发布

最新推荐文章于 2024-04-12 17:58:57 发布 · 138 阅读

文章标签：

#Ajax #jQuery #JavaScript #HTML #浏览器 #ViewUI

啊，咋科斯╮(╯▽╰)╭ 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单可编辑表格示例。通过点击表格单元格，用户可以直接编辑内容，并通过回车键确认修改或将更改撤销。该示例展示了如何使用jQuery简化DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端---------->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>JQuery示例：可以编辑的表格</title>
  <!--<link type="text/css" rel="stylesheet" href="css/edit.css" />-->
  <script type="text/javascript" src="jslib/jquery.js"></script>
  <script type="text/javascript" src="jslib/jqueryedit.js"></script>
</head>
<body>
    <!--一个最简单的表格.一行两列，我们需要让表格中的数据点击时可以修改-->
    <table border="1px">
        <tbody>
            <tr>
                <td>123123</td>
                <td>456456</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

javaScript-------->

//在页面装载时，让所有的td都拥有一个点击事件
$(document).ready(function() {
    //找到所有的td节点
    var tds = $("td");
    //给所有的td节点增加点击事件
    tds.click(tdclick);
});

//td被点击的事件
function tdclick() {
    //0.保存当前的td节点
    var td = $(this);
        //1.取出当前td中的文本内容保存起来
    var text = td.text();
        //2.清空td里面的内容
    td.html("");  //也可以用td.empty();
    //3.建立一个文本框，也就是input的元素节点
    var input = $("<input>");
        //4.设置文本框的值是保存起来的文本内容
    input.attr("value", text);
        //4.5让文本框可以响应键盘按下并弹起的事件，主要用于处理回车确认
    input.keyup(function(event) {
        //0.获取当前用户按下的键值
        //解决不同浏览器获取事件对象的差异
        var myEvent = event || window.event;
        var kcode = myEvent.keyCode;
            //1.判断是否是回车按下
        if (kcode == 13) {
            var inputnode = $(this);
                //2.保存当前文本框的内容
            var intputext = inputnode.val();
                //3.清空td里面的内容
            var tdNode = inputnode.parent();
                //4。将保存的文本框的内容填充到td中
            tdNode.html(intputext);
                //5.让td重新拥有点击事件
            tdNode.click(tdclick);
        }
        //判断是否按下Esc，按下则取消修改
        if (kcode == 27) {
            //1.获取当前节点
            var inputnode = $(this);
            //2.获取父节点即<td>节点
            var tdNode = inputnode.parent();
            //3.将保存的未修改前的值填充到td中
            tdNode.html(text);
            //4.让td重新拥有点击事件
            tdNode.click(tdclick);
        }
    });
        //5.将文本框加入到td中
    td.append(input);  //也可以用input.appendTo(td)

    //5.5让文本框里面的文字被高亮选中
    //需要将jquery的对象转换成dom对象
    var inputdom = input.get(0);
    inputdom.select();
    //6.需要清除td上的点击事件
    td.unbind("click");
}

效果图----------->附件