实现表格双击可修改,修改后保存按钮提交,取消则不提交。
表格代码:
<table>
<tr>
<th>序号</th>
<th>标题</th>
<th>内容</th>
</tr>
<tr>
<th>1</th>
<td id='xx1'>你好</td>
<td id='xx2'>你好</td>
</tr>
<tr>
<th>2</th>
<td id='xxx1'>试试</td>
<td id='xxx2'>试试</td>
</tr>
</table>
实现表格中td都可以修改(th不做修改), JS代码(这部分代码与table代码在同一个页面):
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
function refresh() {
self.location.reload();
}
$(function(){
$('table td.edit').dblclick(function(){
if(!$(this).is('.input')){
$(this).addClass('input').html('<form><input type="text" value="'+ $(this).text() +'" autofocus /><input type="submit" value="Save" /><input type="button" onclick="refresh()" value="Cancel"></form>').find('form').click().submit(function(){
var thisid = $(this).parent().siblings("th:eq(0)").text();
var thisvalue=$(this).find('input').val();
var thisclass = $(this).parent().attr("id");
$.ajax({
type: 'POST',
url: 'Update.php',
data: "thisid="+thisid+"&thisclass="+thisclass+"&thisvalue="+thisvalue
});
$(this).parent().removeClass('input').html($(this).find('input').val() || 0);
});
}
}).hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});
</script>
传递这个表格的对应的第一个序号为thisid,新输入的内容为thisvalue,表格对应的属性id为thisclass,将这些参数传递到Update.php:
<?php
define('DB_HOST', 'localhost');
define('DB_USER', 'xxx');
define('DB_PASS', 'xxx');
define('DB_NAME', 'xxx');
$dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASS,DB_NAME);
$id = trim($_REQUEST['thisid']);
$thisclass = trim($_REQUEST['thisclass']);
$thisvalue= trim($_REQUEST['thisvalue']);
if (substr_count($thisclass," ")>0){
$thisclass=str_replace(" ","",$thisclass);
}
if (substr_count($thisclass,"input")>0){
$thisclass=str_replace("input","",$thisclass);
}
$update_sql = "update Build_Data set $thisclass='$thisvalue' where Build_Id='$id'";
if (!mysqli_query($dbc,$update_sql)) {
printf ("Error Message: %s\n", mysqli_error($dbc));
}
?>