JS html array

本帖最後由 carlkyo 於 2019-9-6 00:09 編輯

我有個from,打完資料禁制就可以出到下面兩個table(用純JS)

我試過serialize,serializeArray n formdata
都做唔到php咁既2d array
Ching有冇sample啊
Many thanks
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Example</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  8.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  9.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  10.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  11.       <script>
  12. $(document).ready(function(){
  13. $( "form" ).on( "submit", function( event ) {
  14.   event.preventDefault();
  15.         var data = $(this).serializeArray();

  16.         $.each(data, function(i, item) {
  17.     $('#tel tbody').append('<tr><td>'+item.name+'</td><td>'+item.value+'</td></tr>');
  18.         $('#email tbody').append('<tr><td>'+item.name+'</td><td>'+item.value+'</td></tr>');
  19.         });
  20.         /*       
  21.         var values = $("input[name='name[]']")
  22.               .map(function(){return $(this).val();}).get();
  23.                           console.log(values);
  24.         */
  25. });
  26. });
  27. </script>
  28. </head>

  29. <body>
  30.     <div class="container">
  31.         <div class="row">        
  32.             <div class="col-sm-12">
  33.             <div class="card">
  34.                                   <div class="card-body">
  35.                     <form action="">
  36.                 <table class="table">
  37.                     <thead>
  38.                         <tr>
  39.                             <th>Name</th>
  40.                             <th>Tel</th>
  41.                             <th>Email</th>
  42.                         </tr>
  43.                     </thead>
  44.                     <tbody>
  45.                         <tr>
  46.                             <td><input type="text" class="form-control" name="name[]" value="John"></td>
  47.                             <td><input type="text" class="form-control" name="tel[]" value="11110000"></td>
  48.                             <td><input type="text" class="form-control" name="email[]" value="john@example.com"></td>
  49.                         </tr>
  50.                         <tr>
  51.                             <td><input type="text" class="form-control" name="name[]" value="Mary"></td>
  52.                             <td><input type="text" class="form-control" name="tel[]" value="12345678"></td>
  53.                             <td><input type="text" class="form-control" name="email[]" value="mary@example.com"></td>
  54.                         </tr>                     
  55.                     </tbody>
  56.                 </table>
  57.                                 <button type="submit" class="btn btn-primary">Submit</button>
  58.                 </form>
  59.                 </div>
  60.                         </div>
  61.             </div>
  62.             <div class="col-sm-6">
  63.                     <h2>User Tel</h2>
  64.                 <table id="tel" class="table">
  65.                     <thead>
  66.                         <tr>
  67.                             <th>Name</th>
  68.                             <th>Tel</th>                     
  69.                         </tr>
  70.                     </thead>
  71.                     <tbody>                       
  72.                     </tbody>
  73.                 </table>
  74.             </div>
  75.             <div class="col-sm-6">
  76.                     <h2>User Email</h2>
  77.                 <table id="email" class="table">
  78.                     <thead>
  79.                         <tr>
  80.                             <th>Name</th>                  
  81.                             <th>Email</th>
  82.                         </tr>
  83.                     </thead>
  84.                     <tbody>                        
  85.                     </tbody>
  86.                 </table>

  87.             </div>
  88.         </div>
  89.     </div>
  90. </body>
  91. </html>
複製代碼
咩都出晒~~
附件: 您需要登錄才可以下載或查看附件。沒有帳號?註冊

本帖最後由 carlkyo 於 2019-9-6 00:27 編輯

我唔想用呢種hardcode~~
  1. $(document).ready(function(){
  2. $( "form" ).on( "submit", function( event ) {
  3.   event.preventDefault();
  4.         var data = $(this).serializeArray();
  5.         var name = $("input[name='name[]']")
  6.               .map(function(){return $(this).val();}).get();
  7.         var tel = $("input[name='tel[]']")
  8.               .map(function(){return $(this).val();}).get();
  9.     var email = $("input[name='email[]']")
  10.               .map(function(){return $(this).val();}).get();
  11.         var i;
  12.         for (i = 0; i < name.length; i++) {
  13.         $('#tel tbody').append('<tr><td>'+name[i]+'</td><td>'+tel[i]+'</td></tr>');
  14.         $('#email tbody').append('<tr><td>'+name[i]+'</td><td>'+email[i]+'</td></tr>');
  15.         }
  16. });
  17. });
複製代碼
有冇好似呢種簡單D
many thanks
  1. var arr = [
  2.   [1, 5, 4],
  3.   [8, 5, 4],
  4.   [3, 4, 5],
  5.   [1, 2, 3]
  6. ]
複製代碼

TOP

* If u want tidy and elegant solution(data binding), u can consider react/angular/vue
* The above solution is hardcode? Then serializeArray() is hardcode too?
* If I use jQuery I will make use of the chain selector:
  1. $('.table:eq(0) tbody tr input').each(function(){console.log($(this).attr('name'), $(this).val())});
複製代碼

TOP

本帖最後由 ink 於 2019-9-22 09:53 編輯
  1. $(document).ready(function(){
  2.         $( "form" ).on( "submit", function( event ) {
  3.                 event.preventDefault();
  4.                 var data = $(this).serializeArray();
  5.                 $.each(data, function(i, item) {
  6.                         item.name = item.name.replace('[]','');
  7.                         if (item.name == 'name'){
  8.                                 Tmp = '<tr><td>'+item.value+'</td>';
  9.                         }else{
  10.                                 $('#'+item.name+' tbody').append(Tmp+'<td>'+item.value+'</td></tr>');
  11.                         }
  12.                 });
  13.         });
  14. });
複製代碼
如果改成咁算唔算 hard code?

TOP

本帖最後由 fx360bx 於 2019-9-22 14:57 編輯

首先,係 form 唔係 from。
第二,你唔應該用 2D array,應該用 array of objects?
[
{name: '', tel: '', email:''},
{name: '', tel: '', email:''}
]
唔知點解你要用 serializeArray。
唔知點解你張 form 要一加就加兩個 items,又冇得加減 rows,以設計既角度黎講好奇怪。

第三,jQuery 同 plain HTML 寫網頁真係好難睇,好睇 maintain。#3 樓講得岩,你試下用 modern framework 寫,加上好多現成既 UI library components,唔會搞到咁樣要寫 selectors 又 mess with HTML tag strings('<tr><td>' + xxx + '</td></tr>')咁肉酸。

第四,要解決你而家個問題,你個 flow 應該係咁:
1. 按 form submit button
2. 用 jQuery 以 class name 或者 name attribute 黎拎出 form data,loop 住 <tr> 黎做,每有一個 <tr> 就整一個 object,拎 <tr> 裡面既 children <td>,即 name、tel、email,放落我上面講既 data structure 裡面
3. 將 data map 成 tel[] 同 email[] 再 re-render 或者 append 落下面兩個 tables。

TOP

我再試下CHING們的方法
many thanks

TOP

JSON objects唔得?

TOP