2015-08-28 80 views
0

我有一個多表數據提取頁面,我想在一些過程後提交到另一個表。jQuery爲每個元素

我的數據是這樣的:

<table id="dayfields"> 
     <tr> 
      <td class="f_name">Mr. XYZ</td> 
      <td class="p_age">50/M</td> 
      <td class="p_days"><input type="text" name="days" id="days" /></td> 
     </tr> 
     <tr> 
      <td class="f_name">Ms. ABC</td> 
      <td class="p_age">36/F</td> 
      <td class="p_days"><input type="text" name="days" id="days" /></td>    
     </tr> 
     <tr> 
      <td class="f_name">Mr. KKK</td> 
      <td class="p_age">40/M</td> 
      <td class="p_days"><input type="text" name="days" id="days" /></td>    
     </tr> 

     <tr><a href="#" id="save">Save</a></tr> 

    </table> 

和jQuery代碼正在嘗試:

<script type='text/javascript'> 
     $(document).ready(function() { 
      $('#save').click(function() { 
       var f_name={}; 
       var p_age={}; 
       var p_days={}; 
       var k=0; 

       $("#dayfields").each(function() { 
        f_name[k]=$(this).val(); 
        p_age[k]=$(this).val(); 
        p_days[k]=$(this).val(); 
        k++; 
       }); 
      console.log(f_name); 
      }); 
     }); 
    </script> 

我發現這個代碼#2 - 但控制檯給我空白的結果。

+0

您有重複元素的ID。它不會工作。當您需要選擇多個元素時使用類。 –

回答

2
  1. 您正在使用table改變它每個迴路tr

  2. val()無效功能td所以將其更改爲從TR .text().html()

  3. 查找TD,並添加到陣列通過class名稱或索引 檢查此: -

    $(document).ready(function() { 
         $('#save').click(function() { 
          var f_name={}; 
          var p_age={}; 
          var p_days={}; 
          var k=0; 
    
          $("#dayfields tr:not(:last-child)").each(function() { 
           f_name[k]=$(this).find('.f_name').text(); 
           p_age[k]=$(this).find('.p_age').text(); 
           p_days[k]=$(this).find('.p_days').find('input').val(); 
           k++; 
          }); 
         console.log(JSON.stringify(f_name)); 
         }); 
        }); 
    

Demo

0

首先,你應該重複TR是不是表。

其次你把所有數組$(this).val()中的相同的東西。

請檢查下面的代碼:

$(document).ready(function() { 
      $('#save').click(function() { 
       var f_name={}; 
       var p_age={}; 
       var p_days={}; 
       var k=0; 

       $("#dayfields tr").each(function() { 

        f_name[k]=$(this).find(".f_name").html(); 
        p_age[k]=$(this).find(".p_age").html(); 
        p_days[k]=$(this).find(".p_days").html(); 
        k++; 
       }); 
      console.log(f_name); 
      }); 
     }); 
+0

#calinaadi:控制檯將結果顯示爲「Object {}」 – Vikram

相關問題