js实现无刷新数据管理

最新推荐文章于 2022-10-11 11:16:07 发布
最新推荐文章于 2022-10-11 11:16:07 发布
阅读量1.1k 收藏
点赞数
分类专栏： JavaScript 文章标签： class function input stylesheet xhtml table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyd_linux/article/details/6987631
版权

 源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js实现无刷新数据管理</title>
<link href="style/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#list table{ border:1px solid #e8e7e1;}
#list th,#list td{ margin:0 auto;height:26px;line-height:29px;text-align:left;padding-left:4px; border-width:0 0 1px 0;}
#list th{ background-color:#f7f6f0;font-size:14px;font-weight:normal;}
textarea.shorter{ width:40%; height:58px;}
span.red{ color:red;}span.blue{ color:blue;}span.point{ cursor:pointer; margin-right:12px;}span.hidden{ display:none;}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="gb2312"></script>

<script type="text/javascript" language="javascript">
function newTr(obj){
	$(obj).parent().parent().after("<tr>"+
		"<td><input name=\"textfield\" type=\"text\" class=\"text\" /></td>"+
		"<td><input name=\"textfield\" type=\"text\" class=\"text short\" value=\"0\" /></td>"+
		"<td> <span class=\"red point\" οnclick=\"add(this)\">保存</span> <span class=\"blue point\" οnclick=\"del(this)\">删除</span></td>"+
		"</tr>");
}
function sendAjax(obj1,obj2){
	alert(obj1+"|"+obj2);//这里调用AJAX数据更新方法
}
function del(obj){
	var ftr = $(obj).parent().prev().prev(), name = ftr.find("input"),val;
	if(name.length == 1){
		val = name.val();
		if(val == ""){val = name.next("span").text();}
	}
	else{
		val = ftr.text();
	}
	if(confirm("确定删除该用户吗？")){
	    if(val != ""){sendAjax("delcustomer",val);}
		$(obj).parent().parent().remove();
	}
}
function add(obj){
	var ob = $(obj),tr = ob.parent().prev().prev(),val = tr.find("input").val(),val1;
	if(val == ''){alert("用户名称不能为空")}
	else{	
	  tr.html(val);
	  tr = tr.next();
	  val1=tr.find("input").val();
	  if(val1==""){val1="0";}
	  tr.html(val1);
	  sendAjax("addcustomer",val+"_"+val1);
	  ob.hide().replaceWith("<span class=\"red point\" οnclick=\"modify(this)\">修改</span>");
	  alert('新增成功');
	}
}
function save(obj){
	var ob = $(obj),tr = ob.parent().prev().prev(),val = tr.find("input").val(),oval = tr.find("span").text(),val1;
	if(val == ''){alert("用户名称不能为空")}
	else{	
	  tr.html(val);
	  tr = tr.next();
	  val1 = tr.find("input").val();
	  if(val1==""){val1="0";}
	  tr.html(val1);
	  sendAjax("savecustomer",oval+"_"+val+"_"+val1);
	  ob.hide().replaceWith("<span class=\"red point\" οnclick=\"modify(this)\">修改</span>");
	  alert('保存成功');
	}
}
function modify(obj){
	var ob = $(obj),tr = ob.parent().prev();
	tr.html("<input name=\"textfield\" type=\"text\" class=\"text short\" value=\""+tr.text()+"\" id=\"textfield\" />");
	tr = ob.parent().prev().prev();
	tr.html("<input name=\"textfield\" type=\"text\" class=\"text\" value=\""+tr.text()+"\" id=\"textfield\" /><span class=\"hidden\">"+tr.text()+"</span>");
	ob.hide().replaceWith("<span class=\"red point\" οnclick=\"save(this)\">保存</span>");
}
function butchsave(){
	var errnum = 0,val,vals,mode = "add",oval;
	$("table tr td input").each(function(i){
										 val = $(this).val();
										 if(i%2 == 0){
										 	if(val == ""){
												errnum++;
												vals = "";
											}
											else{
												vals = val;
												$(this).replaceWith(val);
												oval = $(this).next("span");
												if(oval!=null){
													mode="modify";
													val = oval.text()+"_"+val;
												}												
											}
										 }
										 else{
											 if(vals!=""){
												 vals +="_"+val;
												 if(mode == "add"){
												 	sendAjax("savecustomer",vals);
												 }
												 else{
													 sendAjax("addcustomer",vals);
												 }
												 $(this).parent().next().html(" <span class=\"red point\" οnclick=\"modify(this)\">修改</span> <span class=\"blue point\" οnclick=\"del(this)\">删除</span>");
												 $(this).replaceWith(val);
											 }
										 }
								});
	if(errnum > 0){alert("有"+errnum+"条数据保存失败!")}
}
</script>
</head>

<body>
<div id="list">
<table cellpadding="0" cellspacing="0">
  <tr>
    <th width="40%">列一</th>
    <th width="40%">列二</th>
    <th> <span class="blue point" οnclick="newTr(this)">新增</span> <span class="blue point" οnclick="butchsave()">批量保存</span></th>
  </tr>
  <tr>
    <td>示例数据一</td>
    <td>示例数据二</td>
    <td> <span class="red point" οnclick="modify(this)">修改</span> <span class="blue point" οnclick="del(this)">删除</span></td>
  </tr>
</table>
</div>
</body>
</html>


 

xyd_linux
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 实现 无刷新定时取数据
03-30
js 实现 无刷新定时取数据! 值得下载看看!资源免费,大家分享!!
使用JavaScript定时取得脚本(不刷新网页,可更新内容)
Zzz's Blog
09-07 3039
第一种方法---------------------------------网页get.html--------------------------新建网页 1function StartGet(){ setInterval(M(), 500);}function M(){  tscript.src="m.js";}---------------------------
js无刷新文件上传并获取数据
jlj01234的博客
06-27 1490
无刷新上传控件原理解析
【JS】前端文件下载(无刷新)方法总结
weixin_30342209的博客
04-15 745
#传统方法 利用iframe 或 form.submit 或 windows.open直接向后端发请求,后端返回文件流，后端处理成功后会直接返回到页面，浏览器会整理并打开自己的保存下载文件机制 。 1、利用form.submit直接向后端提交,后端返回文件流 　　1）前端代码： 1 var downloadURL = "RestHandle.ashx"; 2 var t...
js更新数据
weixin_30408675的博客
03-24 177
工作中出现了一点问题，repeater中添加input/select等标签时，后台需要取值使用，但是不能添加runat="server",如果加上runat="server"后点击分页按钮，repeater中将显示整个页面内容截图，所以去除runat="server" 代码如下： 1、标签：<input type="text" id="txt_ReceiveGift_<...
js实现无刷新分页可控
12-13
"js实现无刷新分页可控"这个主题主要探讨的是如何使用JavaScript来实现一个既高效又兼容多前端框架的分页功能，而且不依赖特定的前端库或框架。 首先，我们要理解"无刷新"的概念。无刷新分页意味着用户在切换页面时...
js实现无刷新分页
03-09
2. **Vue.js、React.js、Angular.js 等框架**：在现代前端框架中，无刷新分页更为方便，可以通过组件化的方式管理和更新数据，如 Vue 中的 `v-for`，React 的 `state` 和 `setState`。 3. **服务器端渲染 (SSR)**：...
Ajax异步无刷新对局部数据更新
10-27
### Ajax异步无刷新对局部数据更新 #### 知识点一：理解Ajax与异步无刷新技术 **Ajax（Asynchronous JavaScript and XML）** 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与...
JavaScript实现提交模式窗口后刷新父窗口数据的方法
10-19
在JavaScript编程中，有时我们需要创建一个模态对话框（modal dialog）来处理用户输入或确认操作，例如在父窗口中点击按钮，弹出一个模式窗口让用户添加数据，然后在数据提交后关闭模态窗口并刷新父窗口的数据。...
实现无刷新分页效果
10-27
JavaScript是实现无刷新分页的核心工具，通过AJAX（Asynchronous JavaScript and XML）技术，可以在后台与服务器进行异步通信。当用户点击分页按钮时，JavaScript会发送一个HTTP请求到服务器，请求特定页面的数据，...
js 各种定时器实现
07-06
已知的多种方式实现的js定时器功能。支持延缓加载功能。
jQuery定时任务执行,js定时获取页面内容
11-18
1、本示例主要利用jQuery进行传值、页面内容同获取 2、index.htm中加入了js定时循环机制，可以定时传值获取内容，可以用这个机制执行一些定时 查询任务，比如新增数据检索等，也可以加入div+css演变成为右下角提示 3、请在web环境下访问，双击访问无效
Ajax实现定时刷新，获取后台数据实现技术
04-29
Ajax实现定时刷新，获取后台数据实现技术
Ajax无刷新实现定时更新数据
也许有错 专栏
06-05 2249
1、引用 ajax.dll 实现走动时间显示来查看效果前台代码          //定时更新时间          function refresh()          {               var div = document.all("divTime");                              var strTime = Default1.GetAllOn
MVC+jQuery 无刷新导出EXCEL的过程(伪excel格式)
朱朱家园
03-02 1613
MVC+jQuery 无刷新导出EXCEL的过程(伪excel格式)： 伪excel格式：用excel能打开显示正常，但会打开会有提示。 1、在网页中建立Jquery过程，实现无刷新下载 jQuery.download = function (url, data, method) { // 获得url和data if (url && data) {
【四二学堂】js定时刷新实现
qq_38187437的博客
12-01 1577
碰到需求需要执行一个定时方法，并且隔一段时间去对比一次后台数据，这里使用js定时刷新，ajax轮询的方式实现 代码如下： &lt;script type="text/javascript"&gt; $(document).ready(function(){ refreshOnTime(); //刚进页面调用一次 setInterval("...
使用JavaScript进行数据处理(长期更新)
weixin_50902154的博客
08-17 314
本文会对常用到的数据处理进行汇总，以便之后查阅。
js中的导出
weixin_46739831的博客
03-07 6391
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 导出 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用
超好玩的js页面效果---实现数值的动态变化
最新发布
前端小白在前进的博客
10-11 2万+
给大家分享一个js页面小特效，实现数值的动态变化，感兴趣的小伙伴们可以看过来哦！喜欢老詹的球迷也要点过来看一看哦！
C#实现中国地区三级联动下拉菜单无刷新技术
`<script src="area.js" type="text/javascript"></script>`引用了一个名为`area.js`的外部JavaScript文件，这将是实现联动逻辑的关键。 `area.js`文件定义了一个名为`Dsy`的对象，这个对象包含了添加（`add`）和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值