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

发布时间：2020-12-16 03:36:37 所属栏目：百科来源：网络整理

导读：html: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/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"

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");
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!