脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 td点击后变为input可以输入,更新数据,无刷新更新
演示
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th><a href="https://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);
?>
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格全部内容,希望文章能够帮你解决javascript代码实例教程-jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。