从现有表格创建一个新表格

Question

这是一个随机练习，但我想从现有表格获取内容并根据所拍摄的条目创建一个新表格。

在上图中，左边的表是什么，我有已经工作。右边的蓝色表格是我想要创建的;使用左侧表格中的数据。

这可以用jQuery或一些基本的PHP来完成吗？

如果你想知道为什么我这样做，因为我没有访问SQL数据库，我想使用谷歌图表API来显示每个月的用户注册总数。

一如既往，您的帮助非常感谢。

Answer 1

使用jQuery它可以通过这种方式

//initialize monthArray 
var monthArr = [{month:'April', occ:0}, {month:'May', occ:0},{month:'June', occ:0}]; 

//read occurrences for MonthNames in your existing table 
$.each(monthArr, function(n,i){ 
    var _occ = $("td:contains('"+monthArr[n].month+"')").size(); 
    monthArr[n].occ = _occ; 
}); 

// create new table and show the values 
$.each(monthArr, function(index, value) { 
    //alert(value.occ+ ': ' + value.month); 
    $('#inTable').append('<tr><td>'+value.month+'</td><td>'+value.occ+'</td></tr>'); 
}); 

这里做的是小提琴：http://jsfiddle.net/A3WeJ/38/

注：表的外观和感觉的格式没有在这个解决方案

Answer 2

您是否希望使用jQuery或PHP的问题取决于这些表格的内容是否可能在页面加载后发生更改。如果页面不会更改，则应使用PHP。

假设表格是使用while或foreach循环产生的，您可以简单地为表中每个选项设置计数。在循环中，如果您检查此列中的内容并将其添加到适当的任意计数，您可以统计每个计数的数量。

这可能是很好的检查内容是什么，以及它是否已经在你的数组中。

希望能为这个问题背后的想法提供一些初步的帮助！

Answer 3

你可以试试这个（你没有提供更多的信息，因此可能只是一个想法）

HTML的ID maintable可以用其他ID /类进行更改或只是table

​<table id="maintable"> 
    <thead><th>Name</th><th>Join Month</th><th>Join Year</th></thead> 
    <tbody> 
     <tr><td>Joe Blogs</td><td>April</td><td>2012</td></tr> 
     <tr><td>Mr. X</td><td>April</td><td>2012</td></tr> 
     <tr><td>Andrew Xmen</td><td>April</td><td>2012</td></tr> 
     <tr><td>Matt Bblogs</td><td>may</td><td>2012</td></tr> 
     <tr><td>Malcom McGuiness</td><td>June</td><td>2012</td></tr> 
     <tr><td>Friday Needavodka</td><td>June</td><td>2012</td></tr> 
    </tbody> 
</table> 
<div id="myTblDiv"></div> 

JS

​$(function(){ 
    var rows={}; 
    $('table#maintable tbody tr').each(function(){ 
     var item=$('td:eq(1)', $(this)); 
     if(rows.hasOwnProperty(item.text())) 
      rows[item.text()]=parseInt(rows[item.text()])+1; 
     else rows[item.text()]=1; 
    }); 

    var myTable=$('<table />', {'id':'myNewtable', 'class':'table table-striped'}); 
    var th=$('<thead><th>Total</th><th>Month</th></thead>'); 
    var tbody=$('<tbody></tbody>'); 
    myTable.append(th).append(tbody); 
    $.each(rows, function(k, v){ 
     var row=$('<tr><td>'+v+'</td><td>'+k+'</td></tr>'); 
     myTable.find('tbody').append(row); 
    }); 
    $('div#myTblDiv').append(myTable); 
});​ 

DEMO或Different Style。

注意，我用一个id为(maintable)由谷歌生成的表，在这种情况下，你必须改变id或class（如果有的话），甚至你可以用table没有任何ID或类名但确保只有一张桌子时，如果您只使用$('table')，并且如果您可以将该表格封装在父div中，则可以使用$('div#parentDivId table')。