ホームページ ウェブフロントエンド jsチュートリアル JSON_jqueryを操作するjQueryのCRUD使用例

JSON_jqueryを操作するjQueryのCRUD使用例

May 16, 2016 pm 04:13 PM
crud jquery json 操作する 使用法

この記事の例では、JSON を操作するための jQuery の CRUD の使用法について説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:
 
 
 
 
Jquery ui 
 
 
 
 
// 著者: Eric Liang
 
     
             
                     
                         
                             
                         
                           
                         
                     
             
     
    id:  
    名前:  
    性別:  
    年齢:  
     

 
    id:  
    名前:  
    性別:  
    年齢:  
   
 
 
<スクリプト> 
 
<スクリプトタイプ="text/javascript"> 
       var jsonObj = { 先生: [
 { id:'1'、名前: "エリック"、性別: "m"、年齢: "40" }、
 { id:'2'、名前: "ゴースト"、性別: "m"、年齢: "28" }、
 { id:'3'、名前: "Didi"、性別: "m"、年齢: "27" }
    ]}; 
 リフレッシュ(); 
 関数fresh() {
  var 人 = jsonObj.Teacher; 
  $("tr[name='person']").remove(); 
  for(var i=0; i    var cur_person = 人[i]; 
   var cur_name = cur_person.name; 
   var cur_sex = cur_person.sex; 
   var cur_age = cur_person.age; 
   var cur_id = cur_person.id; 
   var idTd = ""; 
   var nameTd = ""; 
   var sexTd = ""; 
   var ageTd = ""; 
   var deleteAction = "" 
   var updateAction = "" 
   //alert(deleteAction);
   var trStr = "" idTd;
   trStr = 名前Td; 
   trStr = セックスTd; 
   trStr = 年齢Td; 
   trStr = 削除アクション; 
   trStr = updateAction; 
   //アラート(trStr); 
   $('#personform').append(trStr); 
      }
 }
 function checkPersonExist(targetId) {
  var 人 = jsonObj.Teacher; 
  for(var i=0; i    var cur_person = 人[i]; 
   if(cur_person.id == targetId) {
        alert("追加失败! Id" targetId "已经存在!"); 
        false を返します;
   }
  }
  true を返します。 
 }
 function addperson() {
    var userid = $('#userid').val(); 
    var flag = checkPersonExist(ユーザーID); 
    if(フラグ == false) {
   false を返します。 
    }
      var ユーザー名 = $('#ユーザー名').val(); 
      var セックス = $('#sex').val(); 
      var age = $('#age').val(); 
      var newPerson = "{id:" "'" ユーザー ID "'" "," "name:" "'" ユーザー名 "'" "," "性別:" "'" 性別 "'" "," "年齢:" "'" 年 "'" "}"; 
      新しい人 = eval("(" 新しい人 ")"); 
      //$('#personform').append(trStr); 
      jsonObj.Teacher.push(newperson); 
      リフレッシュ(); 
 }
 function deleteperson(obj) {
  //アラート(obj.name); 
  var delId = obj.name; 
  var 人 = jsonObj.Teacher; 
  for(var i=0; i    var cur_person = 人[i]; 
   if(cur_person.id == delId) {
        people.splice(i,1);
   }
  }
  リフレッシュ(); 
 }
 function updateperson(targetId) {
      var updateId = targetId.name; 
      var 人 = jsonObj.Teacher; 
      for(var i=0; i    var cur_person = 人[i]; 
   if(cur_person.id == updateId) {
        var cur_id = cur_person.id
        var cur_name = cur_person.name; 
        var cur_sex = cur_person.sex;
        var cur_age = cur_person.age;
        $('#update_userid').attr('value',cur_id); 
        $('#update_username').attr('value',cur_name); 
        $('#update_sex').attr('value',cur_sex); 
        $('#update_age').attr('value',cur_age); 
   }
  }
 }
 関数 update() {
      var cur_id = $('#update_userid').val(); 
      var cur_name = $('#update_username').val(); 
var cur_sex = $('#update_sex').val(); var cur_age = $('#update_age').val(); var 人 = jsonObj.Teacher
for(var i=0; i var userId = person[i].id;
If(cur_id == userId) {
person[i].name = cur_name; 人[i].age = cur_age
people[i].sex = cur_sex
} }
リフレッシュ(); }



この記事が皆さんの jQuery プログラミングに役立つことを願っています。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Linux Deployの操作手順と注意事項 Linux Deployの操作手順と注意事項 Mar 14, 2024 pm 03:03 PM

LinuxDeploy の操作手順と注意事項 LinuxDeploy は、ユーザーが Android デバイスにさまざまな Linux ディストリビューションを迅速に展開できるようにする強力なツールで、ユーザーはモバイル デバイスで完全な Linux システムを体験できます。この記事では、LinuxDeploy の操作手順と注意事項を詳しく紹介し、読者がこのツールをより効果的に使用できるように、具体的なコード例を示します。操作手順: Linux のインストールDeploy: まず、インストールします

PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント PHP 配列を JSON に変換するためのパフォーマンス最適化のヒント May 04, 2024 pm 06:15 PM

PHP 配列を JSON に変換するためのパフォーマンスの最適化方法には、JSON 拡張機能と json_encode() 関数の使用、文字エスケープを回避するためのバッファーの使用、およびサードパーティのエンコード結果の使用の検討が含まれます。 JSONエンコーディングライブラリ。

Huawei Mate60 Proのスクリーンショット操作手順の共有 Huawei Mate60 Proのスクリーンショット操作手順の共有 Mar 23, 2024 am 11:15 AM

スマートフォンの普及に伴い、スクリーンショット機能は携帯電話を日常的に使用する上で必須のスキルの 1 つになりました。 Huaweiの主力携帯電話の1つであるHuawei Mate60Proのスクリーンショット機能は、当然のことながらユーザーの注目を集めています。今日は、誰もがより便利にスクリーンショットを撮れるように、Huawei Mate60Pro携帯電話のスクリーンショットの操作手順を共有します。まず、Huawei Mate60Pro携帯電話はさまざまなスクリーンショット方法を提供しており、個人の習慣に応じて自分に合った方法を選択できます。以下は、一般的に使用されるいくつかのインターセプトの詳細な紹介です。

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化をどのように制御しますか? May 06, 2024 pm 10:09 PM

Jackson ライブラリのアノテーションは、JSON のシリアル化と逆シリアル化を制御します。 シリアル化: @JsonIgnore: プロパティを無視します @JsonProperty: 名前を指定します @JsonGetter: get メソッドを使用します @JsonSetter: set メソッドを使用します Deserialization: @JsonIgnoreProperties: プロパティ @ JsonProperty を無視します:名前を指定 @JsonCreator: コンストラクターを使用 @JsonDeserialize: カスタム ロジック

PHP 文字列操作: スペースを効果的に削除する実用的な方法 PHP 文字列操作: スペースを効果的に削除する実用的な方法 Mar 24, 2024 am 11:45 AM

PHP 文字列操作: スペースを効果的に削除する実用的な方法 PHP 開発では、文字列からスペースを削除する必要がある状況によく遭遇します。スペースを削除すると文字列がきれいになり、その後のデータ処理と表示が容易になります。この記事では、スペースを削除するための効果的かつ実践的な方法をいくつか紹介し、具体的なコード例を添付します。方法1: PHP組み込み関数trim()を使用する PHP組み込み関数trim()を使用すると、文字列の両端のスペース(スペース、タブ、改行などを含む)を削除でき、非常に便利で簡単です。使用します。

WeChat を Ele.me にバインドする方法 WeChat を Ele.me にバインドする方法 Apr 01, 2024 pm 03:46 PM

Ele.me は、さまざまな珍味を集めたソフトウェアです。オンラインで選択して注文できます。販売者は注文を受けてすぐに作成します。ユーザーはソフトウェアを通じて WeChat をバインドできます。具体的な内容を知りたい場合は、操作方法については、PHP 中国語 Web サイトを忘れずに確認してください。 WeChat を Ele.me にバインドする方法の手順: 1. まず Ele.me ソフトウェアを開き、ホームページに入った後、右下隅の [My] をクリックします; 2. 次に、My ページで、左上隅の[アカウント]; 3. 次に、携​​帯電話、WeChat、Alipay、および淘宝網をバインドできる個人情報ページに移動します. ここで、[WeChat] をクリックします; 4. 最後のクリック後、WeChat アカウントを選択しますこれは WeChat 認証ページでバインドする必要があり、[許可] をクリックするだけです。

Astar ステーキングの原則、収入の解体、エアドロップ プロジェクトと戦略、および運営のナニー レベルの戦略 Astar ステーキングの原則、収入の解体、エアドロップ プロジェクトと戦略、および運営のナニー レベルの戦略 Jun 25, 2024 pm 07:09 PM

目次 Astar Dapp ステーキングの原則 ステーキング収益 潜在的なエアドロップ プロジェクトの解体: AlgemNeurolancheHealthreeAstar Degens DAOVeryLongSwap ステーキング戦略と運用 「AstarDapp ステーキング」は今年初めに V3 バージョンにアップグレードされ、ステーキング収益に多くの調整が加えられましたルール。現在、最初のステーキング サイクルが終了し、2 番目のステーキング サイクルの「投票」サブサイクルが始まったばかりです。 「追加報酬」特典を獲得するには、この重要な段階を把握する必要があります (6 月 26 日まで続く予定で、残りは 5 日未満です)。 Astarステーキング収入を詳しく説明します。

Win8 コンピューターの起動パスワードを忘れましたか?この操作によりすぐに復元されます。 Win8 コンピューターの起動パスワードを忘れましたか?この操作によりすぐに復元されます。 Mar 27, 2024 pm 10:12 PM

Win8 コンピューターの起動パスワードを忘れることは、日常的にコンピューターを使用するときに多くの人が遭遇する問題です。ログインパスワードを忘れてしまうと、システムに正常にアクセスできなくなり、日常の使用に不便が生じてしまいます。この問題が発生した場合でも、心配しないでください。以下では、Win8 コンピューターのパワーオン パスワードをすばやく復元するための簡単な操作をいくつか紹介します。方法 1: Microsoft アカウントのパスワードを使用する. Microsoft アカウントを使用して Win8 コンピューターにログインする場合は、そのアカウントのパスワードを使用してみることができます。

See all articles
id 
                       
名前セックス年齢アクションの削除更新アクション
" cur_id "" cur_name "" cur_sex "" cur_age "删除更新