Нужна помощь с использованием «для цикла» извлечения данных из таблицы

Question

Просто интересно, может ли кто-нибудь помочь мне.

Я создал таблицу, и с помощью Javascript я извлекаю все данные и помещаю их в div.

$(function() { 
    $('table').each(function() { 
     var output = "", 
      table = $(this), 
      rowHead = table.find('tbody tr th'), 
      rowSubject = table.find('thead tr th:not(:first-child)'), 
      rowContent = table.find('tbody tr td'), 
      copy = table.clone(); 

     output += '<div class="mobiled-table">'; 
     for (i = 0; i < rowHead.length; i++) { 
      output += '<div class="head">' + $(rowHead[i]).html() + '</div>'; 
      for (j = 0; j < rowSubject.length; j++) { 
       output += '<div class="subject">' + $(rowSubject[j]).html() + '</div>'; 
       output += '<div class="content">' + $(rowContent[i]).html() + '</div>'; 
      } 
     } 
     output += '</div>'; 
     $('table').append(output); 
    }); 
}); 

Все работает отлично, за исключением того, что класс .content работает неправильно. Я считаю, что использую неправильный цикл for for, или мне нужно создать еще один цикл for. Пожалуйста, обратите внимание на мой codepen, и вы увидите мою проблему

http://codepen.io/anon/pen/JrKBf

Я надеюсь, что кто-то может помочь.

Answer 1

Поскольку rowContent содержит матрицу ячеек, но в массиве один измерения, вы должны перевести (I, J) на допустимый индекс для rowContent, который (i * 4) + j:

rowContent[i] 

следует заменить:

rowContent[(i*4) + j] 

Answer 2

В более простой способ, вы можете сделать так,

var container=$("#container"); 
$("table tr:not(:first)").each(function() { 
    var heading = $(this).find("th").html(); 
    container.append('<div class="subject">' + heading + '</div>'); 
    $(this).find("td").each(function(i) { 
     container.append('<div class="subject">' + $("table th").eq($(this).index()).html() + '</div>'); 
     container.append('<div class="content">' + $(this).html() + '</div>'); 
    }); 
}); 

Fiddle