コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
回复内容：
ホームページ バックエンド開発 PHPチュートリアル mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？

mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 06, 2016 pm 08:50 PM
ajax jquery mysql php

先放我做好的效果图。如下图1为编辑前的效果，图2为点击“修改库存”后的效果。html和CSS已经弄出来了，但不懂javascript。修改后的数据直接通过后台php修改到mysql，若成功则直接返回数据到库存的td单元格。

mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？

mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？

然后是我的html代码。

<tr id="3308">
    <td><img  src="/static/imghw/default1.png"  data-src="/1369118039-3308.jpg!w120"  class="lazy" / alt="mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？" ></td>
    <td><strong>3308</strong></td>
    <td><span>3.97</span> M³</td>
    <td><span>2950.00</span> 元</td>
    <td>2013-05-21 14:36:20</td>
    <td><input type="text" placeholder="输入库存数"></input></td>
    <td><a class="button small success">保存修改</a></td>
</tr>
ログイン後にコピー
ログイン後にコピー

求兄弟们能给个详细点的答案，实在是不懂javascript啊，整个页面就差这一个功能实现了。另外，这样的表格有长长一列，我可以用php循环生成动态html标签id的。

感谢感谢！

回复内容：

先放我做好的效果图。如下图1为编辑前的效果，图2为点击“修改库存”后的效果。html和CSS已经弄出来了，但不懂javascript。修改后的数据直接通过后台php修改到mysql，若成功则直接返回数据到库存的td单元格。

mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？

mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？

然后是我的html代码。

<tr id="3308">
    <td><img  src="/static/imghw/default1.png"  data-src="/1369118039-3308.jpg!w120"  class="lazy" / alt="mysql - 怎么用jQuery、Ajax、php实现这样的无刷新编辑功能？" ></td>
    <td><strong>3308</strong></td>
    <td><span>3.97</span> M³</td>
    <td><span>2950.00</span> 元</td>
    <td>2013-05-21 14:36:20</td>
    <td><input type="text" placeholder="输入库存数"></input></td>
    <td><a class="button small success">保存修改</a></td>
</tr>
ログイン後にコピー
ログイン後にコピー

求兄弟们能给个详细点的答案，实在是不懂javascript啊，整个页面就差这一个功能实现了。另外，这样的表格有长长一列，我可以用php循环生成动态html标签id的。

感谢感谢！

上面回答的，我没有采纳答案，实在是我水平有限，没有修改好。在php100也同提了这个问题，很快得到解决。下面贴上php100的答案，并附上链接，方便他人。

<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.9.1.min.js"></script>
<style type="text/css">
table{border-collapse:collapse}
td{border:1px #CCC solid;padding:5px;font-size:12px}
a{color:#069;text-decoration:none}
a:hover{color:#C00;text-decoration:underline}
a.button{display:block;border:1px #693 solid;background:#9C6;padding:4px;color:#FFF}
a.success{border-color:#369;background:#69C}
input{font-size:12px;border:1px #999 solid;padding:4px;width:40px;text-align:center}
</style>
</head>
<body>
<table id="dataList">
    <tr>
        <td><strong>3308</strong></td>
        <td><span>3.97</span> M3</td>
        <td><span>2950.00</span> 元</td>
        <td>2013-05-21 14:36:20</td>
        <td>
            <span>库存 0 套</span>
            <input style="display:none;" type="text" value="0" />
        </td>
        <td><a href="#" class="button small" rel="2">修改库存</a></td>
    </tr>
    <tr>
        <td><strong>3308</strong></td>
        <td><span>3.97</span> M3</td>
        <td><span>2950.00</span> 元</td>
        <td>2013-05-21 14:36:20</td>
        <td>
            <span>库存 0 套</span>
            <input style="display:none;" type="text" value="0" />
        </td>
        <td><a href="#" class="button small" rel="1">修改库存</a></td>
    </tr>
</table>
<script type="text/javascript">
$("#dataList a").click(function(){
    var a=$(this),td=a.parent().prev(),s=td.children('span'),i=td.children('input');
    if($.trim(a.text())=='修改库存'){
        a.text('保存修改').addClass('success');
        s.hide();
        i.show();
    }else{
        $.post('save.php',{id:a.attr('rel'),num:i.val()},function(r){
            alert(r.msg);
            if(r.status){
                s.html('库存 '+r.num+' 套');
                a.text('修改库存').removeClass('success');
                s.show();
                i.hide()
            }
        },'JSON')
    }
    return false
})
</script>

</body>
</html>
ログイン後にコピー

上面是html页面，下面是php

<?php
header("Content-type: text/html; charset=utf-8");
$r = array(
    'msg' => '错误！',
    'status' => FALSE,
    'num' => 0
);
if(isset($_POST['id']) && isset($_POST['num'])){
    if(is_numeric($_POST['id']) && is_numeric($_POST['num'])){
        $id = (int)$_POST['id'];
        $num = (int)$_POST['num'];
        $r['msg'] = '修改成功！';
        $r['num'] = $num;
        $r['status'] = TRUE;
    }else{
        $r['msg'] = '错误！[2]';
    }
}else{
    $r['msg'] = '错误！[1]';
}

echo json_encode($r);
?>
ログイン後にコピー

<code>$(document).ready(function() {
//为每一个具有相同id=cartUpdate 的 添加click事件
$("#cartUpdate").live("click",function(){
    var text=$(this).text();
    if(text=="修改数量"){
        var count = $(this).parent().prev().text();
        $(this).parent().prev().html("<input style='width:35px' min=1 type='number' value="+count +" />");
        $(this).text("确定");
    }else if(text=="确定"){
        var count2 = $(this).parent().prev().children().val();
        var id = $(this).parent().prev().prev().prev().prev().text();
        $.post("/cart/update", {
            "productId" : id,"count":count2
        }, function(data) {
            if(data=="ok"){
                $("#p" + id).next().next().next().text(count2);
                $("#p" + id).nextAll().find("button").text("修改数量");
            }else{
                alert("修改失败");
            }
        });
    }
});
</code>
ログイン後にコピー
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前 By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前 By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前 By DDD
R.E.P.O.で節約説明した（そしてファイルを保存）
1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法
4週間前 By DDD
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7569
15
CakePHP チュートリアル
1386
52
Steamのアカウント名の形式は何ですか
87
11
Win11 Activation Key Permanent
61
19
NYTの接続はヒントと回答です
28
107
もっと見る
Related knowledge
MySQL：世界で最も人気のあるデータベースの紹介 MySQL：世界で最も人気のあるデータベースの紹介 Apr 12, 2025 am 12:18 AM

MySQLはオープンソースのリレーショナルデータベース管理システムであり、主にデータを迅速かつ確実に保存および取得するために使用されます。その実用的な原則には、クライアントリクエスト、クエリ解像度、クエリの実行、返品結果が含まれます。使用法の例には、テーブルの作成、データの挿入とクエリ、および参加操作などの高度な機能が含まれます。一般的なエラーには、SQL構文、データ型、およびアクセス許可、および最適化の提案には、インデックスの使用、最適化されたクエリ、およびテーブルの分割が含まれます。

PHPとPython：2つの一般的なプログラミング言語を比較します PHPとPython：2つの一般的なプログラミング言語を比較します Apr 14, 2025 am 12:13 AM

PHPとPythonにはそれぞれ独自の利点があり、プロジェクトの要件に従って選択します。 1.PHPは、特にWebサイトの迅速な開発とメンテナンスに適しています。 2。Pythonは、データサイエンス、機械学習、人工知能に適しており、簡潔な構文を備えており、初心者に適しています。

PHPの現在のステータス：Web開発動向を見てください PHPの現在のステータス：Web開発動向を見てください Apr 13, 2025 am 12:20 AM

PHPは、現代のWeb開発、特にコンテンツ管理とeコマースプラットフォームで依然として重要です。 1）PHPには、LaravelやSymfonyなどの豊富なエコシステムと強力なフレームワークサポートがあります。 2）パフォーマンスの最適化は、Opcacheとnginxを通じて達成できます。 3）PHP8.0は、パフォーマンスを改善するためにJITコンパイラを導入します。 4）クラウドネイティブアプリケーションは、DockerおよびKubernetesを介して展開され、柔軟性とスケーラビリティを向上させます。

なぜMySQLを使用するのですか？利点と利点 なぜMySQLを使用するのですか？利点と利点 Apr 12, 2025 am 12:17 AM

MySQLは、そのパフォーマンス、信頼性、使いやすさ、コミュニティサポートに選択されています。 1.MYSQLは、複数のデータ型と高度なクエリ操作をサポートし、効率的なデータストレージおよび検索機能を提供します。 2.クライアントサーバーアーキテクチャと複数のストレージエンジンを採用して、トランザクションとクエリの最適化をサポートします。 3.使いやすく、さまざまなオペレーティングシステムとプログラミング言語をサポートしています。 4.強力なコミュニティサポートを提供し、豊富なリソースとソリューションを提供します。

PHP：多くのウェブサイトの基礎 PHP：多くのウェブサイトの基礎 Apr 13, 2025 am 12:07 AM

PHPが多くのWebサイトよりも優先テクノロジースタックである理由には、その使いやすさ、強力なコミュニティサポート、広範な使用が含まれます。 1）初心者に適した学習と使用が簡単です。 2）巨大な開発者コミュニティと豊富なリソースを持っています。 3）WordPress、Drupal、その他のプラットフォームで広く使用されています。 4）Webサーバーとしっかりと統合して、開発の展開を簡素化します。

PHP：Web開発の重要な言語 PHP：Web開発の重要な言語 Apr 13, 2025 am 12:08 AM

PHPは、サーバー側で広く使用されているスクリプト言語で、特にWeb開発に適しています。 1.PHPは、HTMLを埋め込み、HTTP要求と応答を処理し、さまざまなデータベースをサポートできます。 2.PHPは、ダイナミックWebコンテンツ、プロセスフォームデータ、アクセスデータベースなどを生成するために使用され、強力なコミュニティサポートとオープンソースリソースを備えています。 3。PHPは解釈された言語であり、実行プロセスには語彙分析、文法分析、編集、実行が含まれます。 4.PHPは、ユーザー登録システムなどの高度なアプリケーションについてMySQLと組み合わせることができます。 5。PHPをデバッグするときは、error_reporting（）やvar_dump（）などの関数を使用できます。 6. PHPコードを最適化して、キャッシュメカニズムを使用し、データベースクエリを最適化し、組み込み関数を使用します。 7

MySQLの場所：データベースとプログラミング MySQLの場所：データベースとプログラミング Apr 13, 2025 am 12:18 AM

データベースとプログラミングにおけるMySQLの位置は非常に重要です。これは、さまざまなアプリケーションシナリオで広く使用されているオープンソースのリレーショナルデータベース管理システムです。 1）MySQLは、効率的なデータストレージ、組織、および検索機能を提供し、Web、モバイル、およびエンタープライズレベルのシステムをサポートします。 2）クライアントサーバーアーキテクチャを使用し、複数のストレージエンジンとインデックスの最適化をサポートします。 3）基本的な使用には、テーブルの作成とデータの挿入が含まれ、高度な使用法にはマルチテーブル結合と複雑なクエリが含まれます。 4）SQL構文エラーやパフォーマンスの問題などのよくある質問は、説明コマンドとスロークエリログを介してデバッグできます。 5）パフォーマンス最適化方法には、インデックスの合理的な使用、最適化されたクエリ、およびキャッシュの使用が含まれます。ベストプラクティスには、トランザクションと準備された星の使用が含まれます

PHPの永続的な関連性：それはまだ生きていますか？ PHPの永続的な関連性：それはまだ生きていますか？ Apr 14, 2025 am 12:12 AM

PHPは依然として動的であり、現代のプログラミングの分野で重要な位置を占めています。 1）PHPのシンプルさと強力なコミュニティサポートにより、Web開発で広く使用されています。 2）その柔軟性と安定性により、Webフォーム、データベース操作、ファイル処理の処理において顕著になります。 3）PHPは、初心者や経験豊富な開発者に適した、常に進化し、最適化しています。

See all articles