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

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

转载作者：行者123 更新时间：2023-11-29 00:52:31

我正在使用以下代码为管理区域动态编辑数据表。它只适用于两列，但当我添加更多列时，我无法编辑数据并将其保存到 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);
}
?>

最佳答案

你是这个意思吗？

$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);
        }

但是您应该能够自己解决此类问题。 ;)

关于php - 如何使用 jquery/ajax 编辑表列数据并保存到 mysql，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7784172/

文章推荐： php - PDOException 仅在某些用例中

文章推荐： mysql - 为相册选择第一张缩略图

文章推荐： android - 改造房间模型映射

jquery - 如果隐藏字段值更改，则应启用“保存”按钮。如果输入相同的值，则应再次禁用“保存”按钮
我尝试根据表单元素的更改禁用/启用保存按钮。但是，当通过弹出按钮选择更改隐藏输入字段值时，保存按钮不受影响。下面是我的代码。我正在尝试序列化旧的表单值并与更改后的表单值进行比较。但我猜隐藏的字段值无
python - 保存 django mongoengine 模型实例时无效的 EmbeddedDocumentField 项(保存()失败)
我正在尝试保存模型的实例，但我得到了 Invalid EmbeddedDocumentField item (1) 其中 1 是项目的 ID(我认为)。模型定义为 class Graph(Docum
iphone - 以 72 dpi 保存 UIImage(Retina 模拟器以 144 dpi 保存)
我有一个非常奇怪的问题......在我的 iPhone 应用程序中，用户可以打开相机胶卷中的图像，在我的示例中 1920 x 1080 像素 (72 dpi) 的壁纸。现在，想要将图像的宽度调整为例
Primefaces 保存/通过过滤数据表结果列表
目前，我正在使用具有排序/过滤功能的数据表成功地从我的数据库中显示图像元数据。在我的数据表下方，我使用第三方图像覆盖流( http://www.jacksasylum.eu/ContentFlow/
Javascript 保存、删除和重新加载输入值
我的脚本有问题。我想按此顺序执行以下步骤: 1. 保存输入字段中的文本。 2. 删除输入字段中的所有文本。 3. 在输入字段中重新加载之前删除的相同文本。我的脚本的问题是 ug()- 函数在我的文本
Laravel 保存/更新多对多关系
任何人都可以帮助我如何保存多对多关系吗？我有任务，用户可以有很多任务，任务可以有很多用户(多对多)，我想要实现的是，在更新表单中，管理员可以将多个用户分配给特定任务。这是通过 html 多选输入来完成
Tensorflow 保存/恢复批量归一化
我在 Tensorflow 中训练了一个具有批归一化的模型。我想保存模型并恢复它以供进一步使用。批量归一化是通过完成的 def batch_norm(input, phase): retur
唯一/保存/更新的Grails问题
我遇到了 grails 的问题。我有一个看起来像这样的域: class Book { static belongsTo = Author String toString() { tit
JavaScript - 保存、存储和更新数组
所以我正在开发一个应用程序，一旦用户连接(通过 soundcloud)，就会出现以下对象: {userid: userid, username: username, genre: genre, fol
Angular 保存/恢复组件状态
我正在开发一个具有多选项卡布局的 Angular 7 应用程序。每个选项卡都包含一个组件，该组件可以引用其他嵌套组件。当用户选择一个新的/另一个选项卡时，当前选项卡上显示的组件将被销毁(我不仅仅是隐
Java JTextPane 保存
我尝试使用 JEditorPane 进行一些简单的文本格式化，但随着知识的增长，我发现 JTextPane 更容易实现并且更强大。我的问题是如何将 JTextPane 中的格式化文本保存到文件？它应
Docker:保存 - 不产生输出
使用 Docker 相当新。我为 Oracle 11g Full 提取了一个图像。创建了一个数据库并将应用程序安装到容器中。正确配置后，我提交了生成 15GB 镜像的容器。测试了该图像的新容器，
ios - 将核心数据值传递到文本字段中以进行编辑/保存
我是使用 Xcode 和 swift 的新手，仍在学习中。我在将核心数据从实体传递到文本字段/标签时遇到问题，然后用户可以选择编辑和保存记录。我的目标是，当用户从 friendslistViewCon
java - 保存/加载具有依赖关系的对象的可靠方法？
我正在用 Java 编写 Android 游戏，我需要一种可靠的方法来快速保存和加载应用程序状态。这个问题似乎适用于大多数 OO 语言。了解我需要保存的内容:我正在使用策略模式来控制我的游戏实体。我
c++ - 保存/加载结构数组是个好主意吗？
我想知道使用 fstream 加载/保存某种结构类型的数组是否是个好主意。注意，我说的是加载/保存到二进制文件。我应该加载/保存独立变量，例如 int、float、boolean 而不是结构吗？我这么
c++ - 保存 QNetworkReply
我希望能够将 QNetworkReply 保存到 QString/QByteArray。在我看到的示例中，它们总是将流保存到另一个文件。目前我的代码看起来像这样，我从主机那里得到一个字符串，我想做的
Android 保存 Canvas
我正在创建一个绘图应用程序。我有一个带有 Canvas 的自定义 View ，它根据用户输入绘制线条: class Line { float startX, startY, stopX, stop
android - 保存 Intent
我有 3 个 Activity 第一个 Activity 调用第二个 Activity ，第二个 Activity 调用第三个 Activity 。第二个 Activity 使用第一个 Activi
ios - 保存 cookies ？
我想知道如何在 Xcode 中保存 cookie。我想使用从一个网页获取的 cookie 并使用它访问另一个网页。我使用下面的代码登录该网站，我想保存从该连接获得的 cookie，以便在我建立另一个连
ios - 保存/编辑重复日历事件的最佳方法
我有一个 SQLite 数据库存储我的所有日历事件，建模如下: TimerEvent *Attributes -date -dateForMark -reminder *Relat

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

编辑代码