本文实例为大家分享了Ajax实现表格中的信息进行更新数据,供大家参考,具体内容如下
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="external nofollow" 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");
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:- bootstrapTable+ajax加载数据 refresh更新数据
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
- Vue2.X 通过AJAX动态更新数据
- jquery+ajaxform+springboot控件实现数据更新功能
- 利用jQuery及AJAX技术定时更新GridView的某一列数据
- jquery ajax 局部无刷新更新数据的实现案例
- Ajax异步无刷新对局部数据更新
- ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
- ajax异步刷新实现更新数据库
- ajax更新数据后,jquery、jq失效问题