2010-10-27 15 views
9

Tengo una tabla con varias filas que contienen entradas de formulario (casillas de verificación, texto, listas desplegables). Cuando hago clic en Guardar, quiero poder obtener JSON que represente cada fila de la tabla que se utilizará en una solicitud AJAX. Cada fila tiene un identificador en él así que me gustaría volver a algo como esto:Entradas de serialización en filas de tabla (jQuery)

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

Con esos números es el ID de la fila de la tabla.

¿Alguna forma de hacerlo?

+0

¿Hay alguna razón específica por la cual necesita que el formato de esa manera? – Calvin

Respuesta

21

Esto debería hacer lo que tiene:

<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> 
+0

Muchas gracias ... esto fue súper útil para mí ... – user284503

+0

Me alegro de que te haya ayudado :) – code90

+0

Muchas gracias. Me ayudó también. :) – Jijoy

2

no hemos probado, pero algo como esto debería funcionar

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(); 
    }); 
}); 
Cuestiones relacionadas