2010-10-27 4 views
9

У меня есть таблица с несколькими строками, которые содержат входные данные формы (флажки, текст, выпадающие списки). Когда я нажимаю «Сохранить», я хочу, чтобы JSON представлял каждую строку таблицы, которая будет использоваться в запросе AJAX. Каждая строка имеет свой идентификатор на нем, так что я хотел бы получить ответ что-то вроде этого:Сериализовать входы в строках таблицы (jQuery)

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

с этими номерами являются идентификатором строки таблицы.

Любой способ сделать это?

+0

Есть ли конкретная причина, почему вам это нужно отформатирован таким образом? – Calvin

ответ

21

Это должно делать то, что вам нужно:

<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

Большое спасибо .. это было очень полезно для меня .. – user284503

+0

Рад, что это помогло вам :) – code90

+0

Большое спасибо. Это тоже помогло мне. :) – Jijoy

2

Не проверял, но что-то, как это должно работать

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(); 
    }); 
}); 
Смежные вопросы