Maison > développement back-end > tutoriel php > 请教一个后台表单编辑问题

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

WBOY
Libérer: 2016-06-20 12:36:39
original
845 Les gens l'ont consulté


这是从数据库循环读取的文件,怎么点修改,左边对应的内容出现编辑状态?(点第一行编辑,张先生出现编辑框,第二行编辑,陈先生出现编辑框...)这是我写的代码,但是不知道怎么修改对应某行。
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>
Copier après la connexion
Copier après la connexion
Copier après la connexion
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>
Copier après la connexion
Copier après la connexion
Copier après la connexion
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>
Copier après la connexion
Copier après la connexion
Copier après la connexion
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;
}
}
}
});
});
}
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal