jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格-freejs.net代码演示

首页>>表单>>jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格(2013-09-13)

jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格

td点击后变为input可以输入,更新数据,无刷新更新

XML/HTML Code

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th><a href="http://www.freejs.net">freejs.net演示</a></td>
<th scope="col">列1</th>
<th scope="col">第二列</th>
<th scope="col">其他</th>
</tr>
<tbody>
<?php
require "conn.php";
$sql="select * from `add_delete_record` where id>0";
$rs=mysql_query($sql);
if ($row = mysql_fetch_array($rs))
{
do {
?>
<tr>
<th><?php echo $row['id']?></th>
<td class="content"><?php echo $row['content']?></td>
<td class="text"><?php echo $row['text']?></td>
<td class="position"><?php echo $row['position']?></td>
</tr>
</Tr>
<?php
}
while ($row = mysql_fetch_array($rs));
}?>
</tbody>
</table>
注意:5个字符以上数据库不能添加
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('table td').click(function(){
if(!$(this).is('.input')){
$(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){
var thisid = $(this).parent().siblings("th:eq(0)").text();
var thisvalue=$(this).val();
var thisclass = $(this).parent().attr("class");
$.ajax({
type: 'POST',
url: 'update.php',
data: "thisid="+thisid+"&thisclass="+thisclass+"&thisvalue="+thisvalue
});
$(this).parent().removeClass('input').html($(this).val() || 0);
});
}
}).hover(function(){
$(this).addClass('hover');
},function(){
$(this).removeClass('hover');
});
});
</script>

update.php

PHP Code

<?php
require "conn.php";
$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 add_delete_record set $thisclass='$thisvalue' where id='$id'";
$result = mysql_query($update_sql);
?>