实时表编辑不仅适用于文本框
Live table edit not only for textboxes
我的问题是关于 PHP/mysql 表的。我需要我可以在单击 html 表时更改 mysql 表中的数据。然后我使用实时表编辑来满足我的需求,并且该代码非常适合文本框输入,但是如果我想应用该代码来上传图像和单选按钮,我就有问题更改 js 代码以将变量提供给 mysql 查询。我试图更好地解释。我有:
<pre><td class="edit_td">
<img id="col_1_id_<?php echo $val0; ?>" class="text" src='data:image/jpg;base64,<?php echo $val1; ?>' width='60px'/>
<!--?php echo $val1; ?-->
<form enctype="multipart/form-data">
<input id="input_col_1_id_<?php echo $val0; ?>" type="file"
style="width: 80px;"/>
</form>
</td></pre>
用于上传图像和
<pre><td class="edit_td">
<span id="col_13_id_<?php echo $val0; ?>" class="text"><?php echo $val13; ?></span>
<form id="input13" method="post" style="align:left; display:none;">
<input name="radio13" type="radio" value="SI"> SI
<br>
<input name="radio13" type="radio" value="NO" checked> NO
</form>
</td></pre>
单选按钮是/否。然后我想使用该 ajax/js 代码将数据发送到 mysql 查询:
$(document).ready(function(){
$(".edit_tr").click(function(){
var ID = $(this).attr('id');
$("#col_1_id_"+ID).hide();
$("#col_2_id_"+ID).hide();
$("#col_3_id_"+ID).hide();
$("#col_4_id_"+ID).hide();
$("#col_5_id_"+ID).hide();
$("#col_6_id_"+ID).hide();
$("#col_8_id_"+ID).hide();
$("#col_10_id_"+ID).hide();
$("#col_14_id_"+ID).hide();
$("#input_col_1_id_"+ID).show();
$("#input_col_2_id_"+ID).show();
$("#input_col_3_id_"+ID).show();
$("#input_col_4_id_"+ID).show();
$("#input_col_5_id_"+ID).show();
$("#input_col_6_id_"+ID).show();
$("#input_col_8_id_"+ID).show();
$("#input_col_10_id_"+ID).show();
$("#input_col_14_id_"+ID).show();
}).change(function(){
var ID = $(this).attr('id');
var var1="data:image/gif;base64,"+"/9j/4AAQSk....."
//document.getElementById("#input_col_1_id_"+ID).src;
var var2=$("#input_col_2_id_"+ID).val();
var var3=$("#input_col_3_id_"+ID).val();
var var4=$("#input_col_4_id_"+ID).val();
var var5=$("#input_col_5_id_"+ID).val();
var var6=$("#input_col_6_id_"+ID).val();
var var8=$("#input_col_8_id_"+ID).val();
var var10=$("#input_col_10_id_"+ID).val();
var var14=$("#input_col_14_id_"+ID).val();
var dataString =
'val0='+ ID
+'&val1='+var1
+'&val2='+var2
+'&val3='+var3
+'&val4='+var4
+'&val5='+var5
+'&val6='+var6
+'&val8='+var8
+'&val10='+var10
+'&val14='+var14
;
$("#col_2_id_"+ID).html('<img src="./img/load.gif" />'); // Loading image
//definiamo quali campi sono obbligatori e li inviamo a mysql
if(
//var1.length>0&&
var2.length>0
//&&var3.length>0
//&&var4.length>0
&&var5.length>0
&&var6.length>0
&&var8.length>0
&&var10.length>0
//&&var14.length>0
){
$.ajax({
type: "POST",
url: "query_update.php",
data: dataString,
cache: false,
//visualizza a video i cambiamenti
//vanno messi tutti i campi variabili
success: function(html) {
$("#col_1_id_"+ID).html('<img src=var1 />');
$("#col_2_id_"+ID).html(var2);
$("#col_3_id_"+ID).html(var3);
$("#col_4_id_"+ID).html(var4);
$("#col_5_id_"+ID).html(var5);
$("#col_6_id_"+ID).html(var6);
$("#col_8_id_"+ID).html(var8);
$("#col_10_id_"+ID).html(var10);
$("#col_14_id_"+ID).html(var14);
}
});
}else{
alert('Immettere tutti i dati obbligatori...');
}
});
// Edit input box click action
$(".editbox").mouseup(function(){
return false
});
// Outside click action
$(document).mouseup(function(){
$(".editbox").hide();
$(".text").show();
});
});
那么,我需要在该代码上更改什么才能使用无线电和上传 img 功能?我真的不明白如何修改该js代码。
根据 XHR2,可以通过 AJAX 上传formdata
对象。代码将更改如下
var dataString = new FormData();
dataString.append("userfile", $("input[type=file]")[0].files[0]);
dataString.append("val0", ID);
dataString.append("val2", var2);
dataString.append("val3", var3);
.
.
.
但这在现代浏览器中被接受,例如IE 10 +,Firefox 4.0 +,Chrome 7 +,Safari 5 +,Opera 12+
相关文章:
- AddEventListener适用于浏览器,但不适用于Android
- 查找仅适用于原始图像的图像放大算法的名称
- 如何在category.php中执行jquery,这应该适用于类别wordpress中的每个帖子
- Web编程,简单但适用于机器人项目
- JavaScript不适用于internet explorer和Firefox,但适用于谷歌
- Jquery事件处理程序仅适用于匿名函数
- 我如何完善这个Javascript代码,使其只适用于来自图像的链接(而不是来自文本的链接)
- 使用.on的多个下拉菜单选择文本仅适用于第一个下拉菜单
- jquery:$(input).keydown无法在单选按钮上设置处理程序,同样的代码也适用于文本
- D3 .on 更改适用于文本而不是图表
- 实时表编辑不仅适用于文本框
- 将鼠标悬停在图像上以显示文本框,使用 JavaScript 仅适用于一个图像,因为我使用的是 getElementByI
- Javascript getElementById()适用于文本框,但不适用于;不能使用单选按钮或下拉选择器
- jQuery文本大小调整插件只适用于第一张幻灯片的引导旋转木马
- jQuery文本旋转/填充适用于单个单词,但不适用于两个单词
- 寻找一种方法,使这种JS效果适用于我的页面上的所有文本,加载
- 如何在键事件处理程序中获得HTML文本元素的新值,也适用于特殊键
- 文本大小调整只适用于部分内容
- 如何创建多个可滚动文本实例?它适用于一个例子
- 无法使用 JavaScript 从文本框中获取所选文本?适用于火狐浏览器,而不是IE