JS melaksanakan penjanaan jadual dinamik dan menyerahkan data jadual kepada kemahiran backend_javascript

Contoh dalam artikel ini memperkenalkan kod JS yang berkaitan untuk menjana jadual secara dinamik dan menyerahkan data jadual ke bahagian belakang Ia dikongsi dengan semua orang untuk rujukan anda. Kandungan khusus adalah seperti berikut

Mari kita lihat keperluan dahulu: jana jadual secara dinamik pada halaman web, edit data dalam jadual, dan kemudian serahkan data dalam jadual ke pelayan bahagian belakang untuk penyimpanan.

Maka perkara pertama yang perlu kita selesaikan ialah masalah menjana jadual secara dinamik

1. Mula-mula kita perlu mengimport fail perpustakaan JS.

<script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>

2. Kemudian buat jadual kosong dalam div halaman terlebih dahulu, yang boleh ditentukan mengikut keperluan anda. Berikut ialah jadual dengan pengepala

<table border="0" style="text-align: center;" width="100%" id="myTable">
 <tr>
  <td width="150px;">表头1</td>
  <td width="150px;">表头2</td>
  <td width="150px;">表头3</td>
  <td width="150px;">表头4</td>
  <td width="150px;">表头5</td>
  <td width="150px;">操作</td>
 </tr>
</table>

3 Selepas jadual dibuat, kita boleh menulis kod kunci untuk menjana jadual secara dinamik. Kami menulis kaedah js untuk mencetuskan

var num = 0;
  function addTable(){
    var tableHtml ="";
    tableHtml += '<tr id="tr'+num+'">'
         +'<td><input class="addtd" id="cnashu1'+num+'" style="width:150px;" type="text" name="cnashu1" /></td>'
         +'<td><input class="addtd" id="cnashu2'+num+'" style="width:150px;" type="text" name="cnashu2"/></td>'
         +'<td><input class="addtd" id="cnashu3'+num+'" style="width:150px;" type="text" name="cnashu3"/></td>'
         +'<td><input class="addtd" id="cnashu4'+num+'" style="width:150px;" type="text" name="cnashu4"/></td>'
         +'<td><input class="addtd" id="cnashu5'+num+'" style="width:150px;" type="text" name="cnashu5"/></td>'
         +'<td><a style="cursor: pointer; color: blue;" onclick="removeTr('+num+')">删除</a>'
           +'<a id="edit'+num+'" class="edit" style="cursor: pointer; color: blue;" onclick="editDataByOne('+num+')">修改</a>'
           +'<a id="save'+num+'" class="hide" style="cursor: pointer; color: blue;" onclick="saveByOne('+num+')">保存</a>'
         +'</td>'
         +'</tr>';
    
    var elements = $("#myTable").children().length;  //表示id为“mtTable”的标签下的子标签的个数
    
    $("#myTable").children().eq(elements - 1).after(tableHtml); //在表头之后添加空白行
    num++;   
  }

Kami dapat melihat bahawa kami telah menambah teg d5fd7aea971a85678ba271703566ebfd dalam teg 2e852944b30bc18a48842a9c5108cba8 Wujud kerana keunikan.

4. Seterusnya kami mengendalikan meja

//删除行
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");
}

Kami telah memadam, mengedit, menyimpan dan operasi lain pada jadual di atas Kandungan operasi khusus boleh dilaraskan mengikut keperluan. (Malah, saya kemudiannya mendapati bahawa saya tidak memerlukan nombor global, dan juga boleh melaksanakan operasi menambah baris. Bagi cara melaksanakannya, ia adalah terutamanya beberapa operasi js. Saya akan mengkajinya apabila saya mempunyai masa)

Pada ketika ini, kod halaman kami untuk menjana jadual secara dinamik telah selesai.

Pada separuh pertama artikel, kita bercakap tentang
cara menjana jadual secara dinamik Seterusnya, kita akan bercakap tentangcara mendapatkan berbilang keping data jadual dan serahkannya kepada pelayan bahagian belakang.

Sebelum pembangunan, saya juga menemui beberapa maklumat di Internet sama ada terlalu ringkas atau tidak dapat difahami, tetapi kebanyakannya menyebut menggunakan Json untuk menghantar berbilang parameter ke latar belakang, jadi saya menulis berdasarkan idea ini .

1 Mula-mula, mari kita lihat cara mendapatkan data dalam jadual, atau gabungkan dengan contoh di atas

<div>
  <form id="submitForm">
    <table border="0" style="text-align: center;" width="100%" id="myTable">
      <tr>
        <td width="150px;">表头1</td>
        <td width="150px;">表头2</td>
        <td width="120px;">表头3</td>
        <td width="120px;">表头4</td>
        <td width="80px;">表头5</td>
        <td width="100px;">操作</td>
      </tr>
    </table>
   </form>
   <input type="button" value="添加" onclick="addTable();">
   <input type="button" value="提交" onclick="save();">
 </div>

Kami dapat melihat bahawa kami telah menambah teg borang di luar teg Jadual dan menetapkan id teg borang.

2 Seterusnya, kami memperoleh parameter teg input dalam bentuk mengikut kaedah "serialize()" jQuery

var msg = $("#submitForm").serialize();  //获得后的msg的值：canshu1=xxx&canshu2=xxx&canshu3=xxx&canshu4=xxx&canshu5=xxx

3 Selepas mendapat data dalam jadual, kami menukarnya kepada data format json mengikut bentuk nilainya

var json = "[{";
var msg2 = msg.split("&");   //先以“&”符号进行分割，得到一个key=value形式的数组
var t = false;
for(var i = 0; i<msg2.length; i++){
  var msg3 = msg2[i].split("=");  //再以“=”进行分割，得到key，value形式的数组
  for(var j = 0; j<msg3.length; j++){
    json+="\""+msg3[j]+"\"";
    if(j+1 != msg3.length){
      json+=":";
    }
    if(t){
      json+="}";
      if(i+1 != msg2.length){  //表示是否到了当前行的最后一列
        json+=",{";
      }
      t=false;
    }
    if(msg3[j] == "canshu5"){  //这里的“canshu5”是你的表格的最后一列的input标签的name值，表示是否到了当前行的最后一个input
      t = true;
    }
  }
  if(!msg2[i].match("canshu5")){  //同上
    json+=";";
  }
          
}
json+="]";
//最终msg的值就被转换为：[{"key":"value"；"key":"value"},{"key":"value"；"key":"value"}]格式的json数据<br />

Melalui kod di atas, kami telah berjaya menukar beberapa keping data dalam jadual ke dalam data format json, kemudian kami boleh menghantar data Json ke latar belakang untuk diproses melalui ajax.

Pada ketika ini, kami telah selesai menulis kod untuk mendapatkan beberapa keping data dalam borang dan menyerahkannya kepada pelayan Kami berharap ia akan membantu pembelajaran semua orang.