Таблица Html для массива json

Question

У меня есть таблица с динамическими строками и столбцами, я пытался преобразовать таблицу HTML в Json, пропуская через каждые tr и td и находив значения внутри текстового поля, но без удачи. Вот мой код js.

$("#btn_Table2Json").click(function() { 
     var rows = []; 
     $('table.dynatable tbody tr').each(function (i, n) { 
      var $row = $(n); 
      if (n.className.toUpperCase() != "Prototype".toUpperCase() && n.className.toUpperCase() != "Header".toUpperCase()) { 
       $('table.dynatable tbody td').each(function (j, d) { 
        rows.push({ 
         //Here id,Name,Address,Contact are dynamic.so need to find it inside of 'th' of table. 
         //but i am not being able to find it, so i just hard coded it :(
         Id: $row.find('td:eq(0)').text(), 
         Name: $row.find('td:eq(1)').text(), 
         Address: $row.find('td:eq(2)').text(), 
         Contact: $row.find('td:eq(2)').text() 
        }); 
       }); 
      } 
     }); 
     //debugger; 
     alert(JSON.stringify(rows)); 
     //alert(table.toString()); 
    }); 

В приведенной выше таблице вывода JSON должен быть:

[{ID:"1",Name:"Bibek",Address:"lubhoo",Contact:"98411"},{ID:"4",Name:"Suraj",Address:"Sanagaun",Contact:"984511"}] 

Мой Html представляет собой (столбцы и строки являются динамическими)

<table class="dynatable"> 
     <thead> 
      <tr class="Header"> 
       <th id="AddRowTh"><button class="add">Add Row</button></th> 
       <th>ID &nbsp;&nbsp;<a href="#" class="RemoveColumn">Remove</a></th> 
       <th>Name&nbsp;&nbsp;<a href="#" class="RemoveColumn">Remove</a></th> 
       <th>Address&nbsp;&nbsp;<a href="#" class="RemoveColumn">Remove</a></th> 
       <th>Contact&nbsp;&nbsp;<a href="#" class="RemoveColumn">Remove</a></th> 
       <th id="AddColumnTh"><button style="width: 100px; height: 25px" class="addColumn">Add Column</button></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr class="prototype"> 
       <td><p class="RowName"></p><a href="#" class="RemoveRow">Remove</a><!--<button class="remove">Remove</button>--></td> 
       <td><input type="text" name="id[]" value="0" class="id" /></td> 
       <td><input type="text" name="name[]" value="" /></td> 
       <td><input type="text" name="col4[]" value="" /></td> 
       <td><input type="text" name="col3[]" value="" /></td> 
      </tr> 
    </table> 

Answer 1

Основное решение - Demo

Поскольку вы используете фактические поля ввода, все, что вам действительно нужно сделать, это обернуть его в форме. После того как вы получите его как форму, вы можете выбрать его с помощью jQuery и вызвать serializeArray(), чтобы создать массив значений по имени.

var table = $('#my_form').serializeArray(); 
console.log(table); 
alert(JSON.stringify(table)); 

Результат не будет на 100%, как вы хотите. Как вы можете видеть, все входы в порядке, но нет надежного способа узнать разницу между строками. Кроме того, я не думаю, что порядок гарантирован.

[{"name":"id[]","value":"1"}, 
{"name":"name[]","value":"Billy"}, 
{"name":"col4[]","value":"Home"}, 
{"name":"col3[]","value":"Phone"}, 
{"name":"id[]","value":"2"}, 
{"name":"name[]","value":"Bob"}, 
{"name":"col4[]","value":"work"}, 
{"name":"col3[]","value":"Cell"}] 

---

Ведение ряда группировок - Demo

Если вы редактировать свои <input name="something[]"> именованные массивы, чтобы иметь номер строки, то вы будете иметь возможность знать, какие значения принадлежат вместе. Например, если у вас две строки, имена входных будет выглядеть следующим образом:

<tr class="prototype"> 
    <td><input type="text" name="id[0]" value="1" class="id" /></td> 
    <td><input type="text" name="name[0]" value="Billy" /></td> 
    <td><input type="text" name="col4[0]" value="Home" /></td> 
    <td><input type="text" name="col3[0]" value="Phone" /></td> 
</tr> 
<tr class="prototype"> 
    <td><input type="text" name="id[1]" value="2" class="id" /></td> 
    <td><input type="text" name="name[1]" value="Bob" /></td> 
    <td><input type="text" name="col4[1]" value="work" /></td> 
    <td><input type="text" name="col3[1]" value="Cell" /></td> 
</tr> 

(обратите внимание на имя массива имеют номер строки в нем) и возвращающие результаты будут выглядеть следующим образом:

[{"name":"id[0]","value":"1"}, 
{"name":"name[0]","value":"Billy"}, 
{"name":"col4[0]","value":"Home"}, 
{"name":"col3[0]","value":"Phone"}, 
{"name":"id[1]","value":"2"}, 
{"name":"name[1]","value":"Bob"}, 
{"name":"col4[1]","value":"work"}, 
{"name":"col3[1]","value":"Cell"}] 

---

результаты Массаж в нужный выход - Demo

Очевидно, что результаты все еще не соответствуют тому, что вы ищете для, но это также можно исправить. Мы знаем название поля, мы знаем значение поля, и теперь мы знаем его номер строки. Используя некоторые регулярные выражения, мы можем выделить имя из номера строки.Использование цикла мы можем перемещать вещи вокруг в формат, который нам нравится:

var table = $('#my_form').serializeArray(); 
var final_results = []; 
var row_patt = /\[(\d+)\]$/; // Gets the row number inside [] 
var name_patt = /^[^\[]+/; // Gets the name without the [0] 
$(table).each(function(index, ele){ 
    // Get the name of input and row number 
    var rowNum = parseInt(row_patt.exec(ele.name)[1]); 
    var name = name_patt.exec(ele.name); 

    // Add the name and value to the correct spot in results 
    if(final_results[rowNum] === undefined){ 
     final_results[rowNum] = {}; 
    } 
    final_results[rowNum][name] = ele.value; 
}); 

Теперь у нас есть отформатированной массив хэшей, которые перечисляют каждое значение для каждой строки:

[{"id":"1","name":"Billy","col4":"Home","col3":"Phone"}, 
{"id":"2","name":"Bob", "col4":"work","col3":"Cell"}] 

Answer 2

Существует библиотека, которая преобразует таблица в формат json: ссылка: https://github.com/lightswitch05/table-to-json

Answer 3

Попробуйте

$('table.dynatable tr').each(function(){ 
    rows.push({ 
     Id: $(this).find('td:eq(1) input').val(), 
     Name: $(this).find('td:eq(2) input').val(), 
     Address: $(this).find('td:eq(3) input').val(), 
     Contact: $(this).find('td:eq(4) input').val() 
    }); 
}); 

DEMO