需要帮助使用'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