JSは表の動的生成を実現し、表データをバックエンド表に提出し、データをjsonに変換する

テキストアドレス
需要:Webページで動的にテーブルを生成し、テーブル内のデータを編集し、テーブル内のデータをバックエンドサーバに提出して保存できます.
まず、テーブルを動的に生成します.
1.まずJSライブラリファイルをインポートする必要があります.jQuery
2.次に、ページdivに空白の表を作成しておきます.必要に応じて、ここではヘッダー付きの表です.
 

 

  
  1
  
  2
  
  3
  
  4
  
  5
  
  
 

3.テーブルが作成されたら、動的にテーブルを生成するキーコードを書くことができます.トリガとしてjsメソッドを書きます

var num = 0;
  function addTable(){
    var tableHtml ="";
    tableHtml += ''
         +''
         +''
         +''
         +''
         +''
         +'  '
           +'  '
           +'  ＃ホゾン＃'
         +''
         +'';
    
    var elements = $("#myTable").children().length;  //  id “mtTable”           
    
    $("#myTable").children().eq(elements - 1).after(tableHtml); //          
    num++;   
  }

ラベルには、主にユーザ入力パラメータを提供するためにラベルを追加し、グローバル変数numは、主に各追加パラメータのidの一意性を区別するために存在することがわかります.
4.次に表を操作します

//   
function removeTr(trNum){
  $("#tr"+trNum).remove();
}
//   
function editDataByOne(trNum){
  $this = $("#tr"+trNum);
  $(".addtd",$this).removeAttr("readonly");
}
//   
function saveByOne(trNum){
  $this = $("#tr"+trNum);
  $(".addtd",$this).attr("readonly","readonly");
}

　　
表の削除、編集、保存などの操作を行いましたが、具体的な操作内容は必要に応じて調整できます.(実は後でグローバルnumを必要とせず、行を追加する操作も実現できることを発見しました.どのように実現するかは、主にjsの操作で、暇があれば検討しましょう)
これで、テーブルのページコードを動的に生成して終わります.前半では、テーブルを動的に生成する方法について説明しました.次に、テーブル内の複数のデータを取得し、バックグラウンドサーバに送信する方法について説明します.
開発する前に私もネットでいくつかの資料を探して、あまりにも簡潔で、読めないか分かりませんが、彼らの多くはJsonの方法を使って複数のパラメータをバックグラウンドに伝えることに言及して、私はこの考え方に基づいて以下のコードを書きました.
1.まず、表のデータを取得する方法を見てみましょう.

  

    

      

        
  1
        
  2
        
  3
        
  4
        
  5
        
  
      
    
   
   
   
 

2.次に、jQueryの「serialize()」メソッドに従って、テーブル内のinputラベルのパラメータを取得します.

var msg = $("#submitForm").serialize();  //    msg  ：canshu1=xxx&canshu2=xxx&canshu3=xxx&canshu4=xxx&canshu5=xx

3.表のデータを入手したら、その値の形式でjson形式のデータに変換します.

var json = "[{";
var msg2 = msg.split("&");   //  “&”      ，    key=value     
var t = false;
for(var i = 0; i

上記のコードにより,表中の複数のデータをjson形式のデータに変換することに成功し,ajax方式でJsonデータをバックグラウンド処理に送信することができる.
転載先:https://www.cnblogs.com/GetLastError/p/7773261.html