如何使用jquery / ajax编辑表列数据并保存到mysql

时间：2011-10-16 12:13:56

标签： php jquery mysql ajax

我正在使用以下代码动态编辑管理区域的数据表。它只适用于两列，但是当我添加更多列时，我无法编辑数据并将其保存到mysql。有人可以告诉我如何添加5个可行的列。这是一个演示，代码来自 DEMO 

<?php include('db.php'); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Live Table Edit</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".edit_tr").click(function() {
        var ID = $(this).attr('id');
        $("#first_" + ID).hide();
        $("#last_" + ID).hide();
        $("#first_input_" + ID).show();
        $("#last_input_" + ID).show();
    }).change(function() {
        var ID = $(this).attr('id');
        var first = $("#first_input_" + ID).val();
        var last = $("#last_input_" + ID).val();
        var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last;
        $("#first_" + ID).html('<img src="load.gif" />');

        if (first.length && last.length > 0) {
            $.ajax({
                type: "POST",
                url: "table_edit_ajax.php",
                data: dataString,
                cache: false,
                success: function(html) {

                    $("#first_" + ID).html(first);
                    $("#last_" + ID).html(last);
                }
            });
        }
        else {
            alert('Enter something.');
        }

    });

    $(".editbox").mouseup(function() {
        return false
    });

    $(document).mouseup(function() {
        $(".editbox").hide();
        $(".text").show();
    });

});
</script>
<style>
body
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
}
.editbox
{
    display:none
}
td
{
    padding:7px;
}
.editbox
{
    font-size:14px;
    width:270px;
    background-color:#ffffcc;

    border:solid 1px #000;
    padding:4px;
}
.edit_tr:hover
{
    background:url(edit.png) right no-repeat #80C8E5;
    cursor:pointer;
}


th
{
    font-weight:bold;
    text-align:left;
    padding:4px;
}
.head
{
    background-color:#333;
    color:#FFFFFF

}
</style>
</head>

<body>
<table width="100%">
<tr class="head">
<th>First Name</th><th>Last Name</th>
</tr>
<?php
$sql=mysql_query("select * from fullnames");
$i=1;
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$firstname=$row['firstname'];
$lastname=$row['lastname'];

if($i%2)
{
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<?php } else { ?>
<tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">
<?php } ?>
<td width="50%" class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $firstname; ?></span>
<input type="text" value="<?php echo $firstname; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td width="50%" class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $lastname; ?></span> 
<input type="text" value="<?php echo $lastname; ?>"  class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
</tr>

<?php
$i++;
}
?>
</table>
</body>
</html>

以下是ajax文件table_edit_ajax.php

的代码 
<?php
include("db.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$firstname=mysql_escape_String($_POST['firstname']);
$lastname=mysql_escape_String($_POST['lastname']);
$sql = "update fullnames set firstname='$firstname',lastname='$lastname' where id='$id'";
mysql_query($sql);
}
?>

已编辑的代码

<?php include('db.php'); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Live Table Edit</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".edit_tr").click(function() {
        var ID = $(this).attr('id');
        $("#first_" + ID).hide();
        $("#last_" + ID).hide();
        $("#othercolumn3_" + ID).hide();
        $("#othercolumn4_" + ID).hide();
        $("#othercolumn5_" + ID).hide();
        $("#first_input_" + ID).show();
        $("#last_input_" + ID).show();
        $("#othercolumn3_input_" + ID).show();
        $("#othercolumn4_input_" + ID).show();
        $("#othercolumn5_input_" + ID).show();
    }).change(function() {
        var ID = $(this).attr('id');
        var first = $("#first_input_" + ID).val();
        var last = $("#last_input_" + ID).val();
        var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last + '&othercolumn3=' + othercolumn3 + '&othercolumn4=' + othercolumn4 + '&othercolumn5=' + othercolumn5;
        $("#first_" + ID).html('<img src="load.gif" />');

        if (first.length && last.length && othercolumn3.length && othercolumn4.length && othercolumn5.length > 0) {
            $.ajax({
                type: "POST",
                url: "table_edit_ajax.php",
                data: dataString,
                cache: false,
                success: function(html) {

                    $("#first_" + ID).html(first);
                    $("#last_" + ID).html(last);
                    $("#othercolumn3_" + ID).html(othercolumn3);
                    $("#othercolumn4_" + ID).html(othercolumn4);
                    $("#othercolumn5_" + ID).html(othercolumn5);
                }
            });
        }
        else {
            alert('Enter something.');
        }

    });

    $(".editbox").mouseup(function() {
        return false
    });

    $(document).mouseup(function() {
        $(".editbox").hide();
        $(".text").show();
    });

});
</script>
<style>
body
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
}
.editbox
{
    display:none
}
td
{
    padding:7px;
}
.editbox
{
    font-size:14px;
    width:270px;
    background-color:#ffffcc;

    border:solid 1px #000;
    padding:4px;
}
.edit_tr:hover
{
    background:url(edit.png) right no-repeat #80C8E5;
    cursor:pointer;
}


th
{
    font-weight:bold;
    text-align:left;
    padding:4px;
}
.head
{
    background-color:#333;
    color:#FFFFFF

}
</style>
</head>

<body>
<table width="100%">
<tr class="head">
<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
</tr>
<?php
$sql=mysql_query("select * from offers");
$i=1;
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$firstname = $row['one'];
$lastname = $row['two'];
$othercolumn3 = $row['three'];
$othercolumn4 = $row['four'];
$othercolumn5 = $row['five'];
if($i%2)
{
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<?php } else { ?>
<tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">
<?php } ?>
<td width="50%" class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $firstname; ?></span>
<input type="text" value="<?php echo $firstname; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td width="50%" class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $lastname; ?></span> 
<input type="text" value="<?php echo $lastname; ?>"  class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
<td width="50%" class="edit_td">
<span id="othercolumn3_<?php echo $id; ?>" class="text"><?php echo $othercolumn3; ?></span> 
<input type="text" value="<?php echo $othercolumn3; ?>"  class="editbox" id="othercolumn3_input_<?php echo $id; ?>"/>
</td>
<td width="50%" class="edit_td">
<span id="othercolumn4_<?php echo $id; ?>" class="text"><?php echo $othercolumn4; ?></span> 
<input type="text" value="<?php echo $othercolumn4; ?>"  class="editbox" id="othercolumn4_input_<?php echo $id; ?>"/>
</td>
<td width="50%" class="edit_td">
<span id="othercolumn5_<?php echo $id; ?>" class="text"><?php echo $othercolumn5; ?></span> 
<input type="text" value="<?php echo $othercolumn5; ?>"  class="editbox" id="othercolumn5_input_<?php echo $id; ?>"/>
</td>
</tr>
<?php
$i++;
}
?>
</table>
</body>
</html>

AJAX 

<?php
include("db.php");
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$firstname=mysql_escape_String($_POST['firstname']);
$lastname=mysql_escape_String($_POST['lastname']);
$othercolumn3 = mysql_escape_String($_POST['othercolumn3']);
$othercolumn4 = mysql_escape_String($_POST['othercolumn4']);
$othercolumn5 = mysql_escape_String($_POST['othercolumn5']);
$sql = "update offers set firstname='$firstname',lastname='$lastname', othercolumn3='$othercolumn3', othercolumn4='$othercolumn4, othercolumn5='$othercolumn5' where id='$id'";
mysql_query($sql);
}
?>

2 个答案:

答案 0 :(得分：1)

你是说这个？

$firstname=mysql_escape_String($_POST['firstname']);
$lastname=mysql_escape_String($_POST['lastname']);
$othercolumn1 = mysql_escape_String($_POST['othercolumn1']);
...
$othercolumn5 = mysql_escape_String($_POST['othercolumn5']);
$sql = "update fullnames set firstname='$firstname',lastname='$lastname', othercolumn1='$othercolumn1', ..., othercolumn5='$othercolumn5' where id='$id'";

您必须创建适当的输入元素并将所需的代码添加到调用脚本的jquery中：

var first = $("#first_input_" + ID).val();
var last = $("#last_input_" + ID).val();
var othercolumn1 = $("#othercoumn1_input_" + ID).val();
...
var othercolumn5 = $("#othercoumn5_input_" + ID).val();
var dataString = 'id=' + ID + '&firstname=' + first + '&lastname=' + last + '&othercolumn1=' + othercolumn1 + ... + '&othercolumn5=' + othercolumn5;
$("#first_" + ID).html('<img src="load.gif" />');

if (first.length && last.length > 0) {
    $.ajax({
        type: "POST",
        url: "table_edit_ajax.php",
        data: dataString,
        cache: false,
        success: function(html) {
            $("#first_" + ID).html(first);
            $("#last_" + ID).html(last);
            $("#othercolumn1_" + ID).html(othercolumn1);
            ...
            $("#othercolumn5_" + ID).html(othercolumn5);
        }

但你应该能够为自己排序这样的事情。 ;）

答案 1 :(得分：0)

更好的方法是将html属性“contenteditable”添加到表格单元格，以允许在单击单元格视图时进行内联编辑 然后附加一个函数onblur事件以使用ajax更新数据库。

相关问题
最新问题