需要幫助使用'for循環'從表中提取數據

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循環'。請看看我的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