jQuery+Ajax实现排序,无刷新更新更新排序-freejs.net代码演示

首页>>表单>>jQuery+Ajax实现排序,无刷新更新更新排序(2016-05-02)

jQuery+Ajax实现排序,无刷新更新更新排序

本站有类似的案例，包括整个表格的多列均支持无刷新替换的效果，具体请搜索

JavaScript Code

<script type="text/javascript">
function changeOrd(obj, id) {
var val = obj.text();
var c = obj.parent("td");
obj.parent("td").html("<input type='text' style='width:50px;' onFocus=this.select() onblur=changeOrdConfirm($(this)," + id + ") value='" + val + "' />");
c.children("input").focus();
}
function changeOrdConfirm(obj, id) {
var ord = obj.val();
$.post("ajax.php", {
id: id,
ord: ord
}, function(data) {
obj.parent("td").html("<a onclick=changeOrd($(this)," + id + ")>" + obj.val() + "</a>");
})
}
</script>

XML/HTML Code

<table width="100%" cellspacing="0" cellpadding="0" border="0" class="table_parameters">
<tbody>
<tr class="tr_head">
<td>标题</td>
<td width="120px">排序</td>
</tr>
<?php
$sql = "SELECT * FROM content ORDER BY id ASC limit 0,10 ";
$query = mysql_query($sql);
while ($row = mysql_fetch_array($query)) {
?>
<tr>
<td align="center"><?php echo $row['name']; ?></td>
<td align="center"><a onclick="changeOrd($(this), '<?php echo $row['id']; ?>')"><?php echo $row['sort']; ?></a></td>
</tr>
<?php } ?>
</tbody>
</table>