Home > Backend Development > PHP Tutorial > 请教一个后台表单编辑问题

请教一个后台表单编辑问题

WBOY
Release: 2016-06-20 12:36:39
Original
847 people have browsed it


这是从数据库循环读取的文件,怎么点修改,左边对应的内容出现编辑状态?(点第一行编辑,张先生出现编辑框,第二行编辑,陈先生出现编辑框...)这是我写的代码,但是不知道怎么修改对应某行。
php代码
while($row=mysql_fetch_array($result)){



   





)"/>
 

}
js代码
<script> <br /> function changeOrderTime(){ <br /> var spanValue = $("#OrderTime").text(); <br /> $("#OrderTimeInput").val(spanValue); <br /> $("#OrderTimeInput").show(); <br /> $("#OrderTime").hide(); <br /> $("#changeOrderTime").hide(); <br /> $("#timeChangeOK").show(); <br /> } <br /></script> 


回复讨论(解决方案)

错误太多,也没守规矩
至少需要这样写

<table><tr><td height="30px" align="center"><span id="OrderTime">张先生</span><input type="text" id="OrderTimeInput" style="display:none"/></td><td height="30px" align="center"><input class="changeOrderTime" type="button" value="修改"/><button style="display:none" id="timeChangeOK">确定</button><input type="button" value="删除" onclick="del_oper(1)"/></td> </tr><tr><td height="30px" align="center"><span id="OrderTime">陈先生</span><input type="text" id="OrderTimeInput" style="display:none"/></td><td height="30px" align="center"><input class="changeOrderTime" type="button" value="修改"/><button style="display:none" id="timeChangeOK">确定</button><input type="button" value="删除" onclick="del_oper(2)"/></td> </tr><tr><td height="30px" align="center"><span id="OrderTime">李先生</span><input type="text" id="OrderTimeInput" style="display:none"/></td><td height="30px" align="center"><input class="changeOrderTime" type="button" value="修改"/><button style="display:none" id="timeChangeOK">确定</button><input type="button" value="删除" onclick="del_oper(3)"/></td> </tr></table><script src=scripts/jquery-1.8.3.min.js></script><script>$(function() {  $('.changeOrderTime').click(function() {    var e = $(this).parents('tr');    e.find('#OrderTimeInput').val(e.find('#OrderTime').text());    e.find('#OrderTime').hide();    e.find('#OrderTimeInput').show();    e.find('#timeChangeOK').show();    $(this).hide();  });});</script>
Copy after login
Copy after login
Copy after login
dhtml 中 id 必须唯一,而你没做到
jquery 允许 id 有条件重复,但必须指明上级容器

你可以设置ID,然后通过传参带入,获取INPUT修改后的值


错误太多,也没守规矩
至少需要这样写

<table><tr><td height="30px" align="center"><span id="OrderTime">张先生</span><input type="text" id="OrderTimeInput" style="display:none"/></td><td height="30px" align="center"><input class="changeOrderTime" type="button" value="修改"/><button style="display:none" id="timeChangeOK">确定</button><input type="button" value="删除" onclick="del_oper(1)"/></td> </tr><tr><td height="30px" align="center"><span id="OrderTime">陈先生</span><input type="text" id="OrderTimeInput" style="display:none"/></td><td height="30px" align="center"><input class="changeOrderTime" type="button" value="修改"/><button style="display:none" id="timeChangeOK">确定</button><input type="button" value="删除" onclick="del_oper(2)"/></td> </tr><tr><td height="30px" align="center"><span id="OrderTime">李先生</span><input type="text" id="OrderTimeInput" style="display:none"/></td><td height="30px" align="center"><input class="changeOrderTime" type="button" value="修改"/><button style="display:none" id="timeChangeOK">确定</button><input type="button" value="删除" onclick="del_oper(3)"/></td> </tr></table><script src=scripts/jquery-1.8.3.min.js></script><script>$(function() {  $('.changeOrderTime').click(function() {    var e = $(this).parents('tr');    e.find('#OrderTimeInput').val(e.find('#OrderTime').text());    e.find('#OrderTime').hide();    e.find('#OrderTimeInput').show();    e.find('#timeChangeOK').show();    $(this).hide();  });});</script>
Copy after login
Copy after login
Copy after login
dhtml 中 id 必须唯一,而你没做到
jquery 允许 id 有条件重复,但必须指明上级容器[/quo


错误太多,也没守规矩
至少需要这样写

<table><tr><td height="30px" align="center"><span id="OrderTime">张先生</span><input type="text" id="OrderTimeInput" style="display:none"/></td><td height="30px" align="center"><input class="changeOrderTime" type="button" value="修改"/><button style="display:none" id="timeChangeOK">确定</button><input type="button" value="删除" onclick="del_oper(1)"/></td> </tr><tr><td height="30px" align="center"><span id="OrderTime">陈先生</span><input type="text" id="OrderTimeInput" style="display:none"/></td><td height="30px" align="center"><input class="changeOrderTime" type="button" value="修改"/><button style="display:none" id="timeChangeOK">确定</button><input type="button" value="删除" onclick="del_oper(2)"/></td> </tr><tr><td height="30px" align="center"><span id="OrderTime">李先生</span><input type="text" id="OrderTimeInput" style="display:none"/></td><td height="30px" align="center"><input class="changeOrderTime" type="button" value="修改"/><button style="display:none" id="timeChangeOK">确定</button><input type="button" value="删除" onclick="del_oper(3)"/></td> </tr></table><script src=scripts/jquery-1.8.3.min.js></script><script>$(function() {  $('.changeOrderTime').click(function() {    var e = $(this).parents('tr');    e.find('#OrderTimeInput').val(e.find('#OrderTime').text());    e.find('#OrderTime').hide();    e.find('#OrderTimeInput').show();    e.find('#timeChangeOK').show();    $(this).hide();  });});</script>
Copy after login
Copy after login
Copy after login
dhtml 中 id 必须唯一,而你没做到
jquery 允许 id 有条件重复,但必须指明上级容器


这样一条一条分条写我明白,我是这样举例的,实际数据有几万条,肯定不能这样写吧?只能从数据库循环读取,但是读取出来之后我就不知道怎么用这种方法编辑了,可以做到去另外一个网页去编辑,把ID传过去就可以了。对JS不熟悉,版主可以写一个具体的程序么?

我不过是给个可供测试的例子,用来指出你的代码的问题
从数据库循环读取,并不意味就可以不遵守规则

我不过是给个可供测试的例子,用来指出你的代码的问题
从数据库循环读取,并不意味就可以不遵守规则


我知道程序写的有问题,可能是我没问好,PHP代码我本来是写成这样的
while($row=mysql_fetch_array($result)){


   



)"/>
 

}
只是单单的把数据从数据库中循环读出来了,因为要添加修改功能,我想用JS实现上面那种的编辑效果,代码不知道怎么写,版主能教下这段代码怎么写么?

示例代码已经给过你了
你写的之所以不成功,原因是你违背的 id 唯一 的原则:
循环中 
必将重复出现


示例代码已经给过你了
你写的之所以不成功,原因是你违背的 id 唯一 的原则:
循环中 
必将重复出现[/quote
我懂了,你一开始就回答的很清楚了!对jQuery 遍历 - parents() 方法不清楚,百度了下明白了!

示例代码已经给过你了
你写的之所以不成功,原因是你违背的 id 唯一 的原则:
循环中 
必将重复出现


在问一个问题,我用同样的方法无法保存修改的数据是为什么
$(function() {
$('.changeOrderTime').click(function() {
var e = $(this).parents('tr');
e.find('#OrderTimeInput').val(e.find('#OrderTime').text());
e.find('#OrderTime').hide();
e.find('#OrderTimeInput').show();
e.find('.timeChangeOK').show();
$(this).hide();
});
});
$(function() {
$('.timeChangeOK').click(function() {
var e = $(this).parents('tr');
e.find('#OrderTime').val(e.find('#OrderTimeInput').text());
e.find('#OrderTimeInput').hide();
e.find('#OrderTime').show();
e.find('.changeOrderTime').show();
$(this).hide();
});
});

你没有提交,怎么保存?

你没有提交,怎么保存?


就是想知道点击确定后怎么获取到修改的数据,然后保存到数据库。

你没有提交,怎么保存?


研究出来了,这是我写的完整程序,结贴!
function edit_oper(id){
$('.changeOrderTime').click(function(){
var e = $(this).parents('tr');
e.find('#OrderTimeInput').val(e.find('#OrderTime').text());
e.find('#OrderTime').hide();
e.find('#OrderTimeInput').show();
e.find('.timeChangeOK').show();
$(this).hide();
});
$('.timeChangeOK').click(function(){
var e = $(this).parents('tr');
e.find('#OrderTime').text(e.find('#OrderTimeInput').val());
e.find('#OrderTimeInput').hide();
e.find('#OrderTime').show();
e.find('.changeOrderTime').show();
$(this).hide();
var up = e.find('#OrderTime').text();
$.ajax({
type:"GET",
url:'edit.inc.php?action=oper&id='+id,
data:{operator : up},
success:function(msg){
if(msg == "success"){
alert("修改成功");
history.go(0) ;
}else{
if(msg == "error1"){
alert("修改失败");
return false;
}
}
}
});
});
}
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template