Sérialiser les entrées dans les lignes de tableau (jQuery)

Question

J'ai une table avec plusieurs lignes qui contiennent des entrées de formulaire (cases à cocher, texte, listes déroulantes). Lorsque je clique sur Enregistrer, je veux obtenir JSON représentant chaque ligne de table qui sera utilisée dans une requête AJAX. Chaque ligne a un id sur elle donc je voudrais revenir quelque chose comme ceci:

[1: { "input_name":"input_value", "input_name":"input_value", etc...}, 2: {etc...}] 

Avec ces chiffres étant l'identifiant de la ligne du tableau.

Un moyen de le faire?

Answer 1

Cela devrait faire ce que vous avez besoin:

<table> 
    <tr id="101"> 
     <td><input type="text" name="f1" value="" /></td> 
     <td><input type="checkbox" name="f2" value="v2" /></td> 
     <td><input type="checkbox" name="f3" value="" /></td> 
     <td><select name="f4"> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
      </select></td> 
    </tr> 
    <tr id="102"> 
     <td><input type="text" name="f1" value="" /></td> 
     <td><input type="checkbox" name="f2" value="v2" /></td> 
     <td><input type="checkbox" name="f3" value="" /></td> 
     <td><select name="f4"> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
      </select></td> 
    </tr> 
    <tr id="103"> 
     <td><input type="text" name="f1" value="" /></td> 
     <td><input type="checkbox" name="f2" value="v2" /></td> 
     <td><input type="checkbox" name="f3" value="" /></td> 
     <td><select name="f4"> 
       <option>1</option> 
       <option>2</option> 
       <option>3</option> 
      </select></td> 
    </tr> 

</table> 
<button id="btnGo">Go</button> 
<script type="text/javascript"> 
    $('#btnGo').click(function(){ 
     var data={}; 
     $('table').find('tr').each(function(){ 
      var id=$(this).attr('id'); 
      var row={}; 
      $(this).find('input,select,textarea').each(function(){ 
       row[$(this).attr('name')]=$(this).val(); 
      }); 
      data[id]=row; 
     }); 
     console.log(data); 
    }); 
</script> 

Answer 2

ai pas testé, mais quelque chose comme ça devrait fonctionner

var myjson = new Object(); 
$("#tableid > tr").each(function() { 
    var tablerow = $(this); 
    $("td input", tablerow).each(function() { 
    var input = $(this); 
    myjson[tablerow.attr("id")][input.attr("name")] = input.val(); 
    }); 
});