从现有表创建一个新表

Question

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

在上图中，左边的表格是我必须使用的。右边的蓝色表是我想要创建的;使用左边表格中的数据。

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

如果您想知道为什么我这样做是因为我无法访问SQL数据库，而且我想使用Google Charts 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。

请注意，我为谷歌生成的表格使用了(maintable)，在这种情况下，您必须更改id或class（如果有）或甚至更改你可以只使用table而没有任何id或类名，但是当你只使用$('table')时确保只有一个表，如果你可以将表包装在父div中，那么你可以使用{ {1}}。