Ajax对表格中的信息不刷新页面进行更新数据

最新推荐文章于 2023-08-07 10:17:19 发布

Grit_ICPC

最新推荐文章于 2023-08-07 10:17:19 发布

阅读量7.2k

点赞数

分类专栏： Ajax 文章标签： Ajax

本文链接：https://blog.csdn.net/Grit_ICPC/article/details/53046533

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="jslib/edit.js"></script>
    <link type="text/css" href="css/edit.css" rel="stylesheet"></head>

</head>
<body>
    <table>
        <tbody>
            <tr>
                <td>1111</td>
                <td>2222</td>
            </tr>
            <tr>
                <td>3333</td>
                <td>4444</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

css:控制单根边框

/*利用table和tr中的空隙来进行控制间隙的颜色*/
table{
    border: 0px;
    background: #000;
}
tr{
    background: #FFF;
}

js:

//在页面装载的时候进行对td的点击
$(document).ready(function () {
    var tds = $("td");
    tds.click(tdclick);
});
function tdclick() {
        //1将文本的内容保存起来
        var td = $(this);
        var text = td.text();
        //2清空td里面的内容
        td.html("");
        //3建立文本框
        var input = $("<input>");
        //4.设置文本框的值是保存起来的值
        input.attr("value", text);
        //4.5相应回车和键盘事件
        input.keyup(function (event) {
            //判断按键是什么
            var myevent = event || window.event;
            var key = myevent.keyCode;
            if (key == 13) {
                var inputnode = $(this);
                //1.保存文本框的内荣
                var inputtext = inputnode.val();
                //2.清空td里面的内容保存的文本框填充到td中去
                var tdNode = inputnode.parent();
                tdNode.html(inputtext);
                //4.让td重新拥有点击事件
                td.click(tdclick);
            }
        });
        //5将文本框加入到td中
        td.append(input);
        //6为了防止td的点击事件，我们可以移除
        td.unbind("click");
}