title: Converting table data into JSON
body: <p>I am trying to convert data present in a HTML table into JSON so that it could be processed accordingly on the server side. I am able to serialize the data, but the results, at best, generate distinct arrays of data which aren't linked directly. 
  Like:
  This is the form I am using:</p>
  
  <pre><code>&lt;form id="nameGenderForm"&gt;
      &lt;table id="nameGenderTable"&gt;
  
          &lt;tr&gt;
              &lt;th &gt;Name&lt;/th&gt;
              &lt;th &gt;Gender&lt;/th&gt;
          &lt;/tr&gt;
  
  
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" name="studentName"&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name="studentGender"&gt;
                          &lt;option value="male"&gt;male&lt;/option&gt;
                          &lt;option value="female"&gt;female&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;&lt;input type="text" name="studentName"&gt;&lt;/td&gt;
                  &lt;td&gt;
                      &lt;select name="studentGender"&gt;
                          &lt;option value="male"&gt;male&lt;/option&gt;
                          &lt;option value="female"&gt;female&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;input type="submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The script to serialize the data is:</p>
  
  <pre><code>$("#nameGenderForm").submit(function(event){
      event.preventDefault();
  
      var rawData=$('#nameGenderForm').serializeFormJSON();
      var formData=JSON.stringify(rawData);
      console.log(formData);
  });
  </code></pre>
  
  <p>serializeFormJSON() is what I got after going through few pages of StackOverFlow:</p>
  
  <pre><code>(function($) {
  $.fn.serializeFormJSON = function() {
  var o = {};
     var a = this.serializeArray();
     $.each(a, function() {
         if (o[this.name]) {
             if (!o[this.name].push) {
                 o[this.name] = [o[this.name]];
             }
             o[this.name].push(this.value || '');
         } else {
             o[this.name] = this.value || '';
         }
     });
     return o;
  };
  })(jQuery);
  </code></pre>
  
  <p>By using all these I am able to get a JSON something like this:</p>
  
  <pre><code>{"studentName":["kenpachi","orihime"],"studentGender":["male","female"]}
  </code></pre>
  
  <p>I tried many ways to get them in a name-gender format but every way yields the same result. Two distinct arrays. Using form for each  didn't help either. 
  Is there any way to get the data in name-gender array like this: </p>
  
  <pre><code>{"studentName":"kenpachi","studentGender":"male"},{"studentName":"orihime","studentGender":"female"}
  </code></pre>
  
  <p>Please advise.</p>