如何根据特定值分叉表中的数据

时间:2014-07-23 12:12:15

标签: javascript jquery html5

在表中我从db接收数据,并且所有标记都有一个特定的值A或B.根据我需要分离数据的值,如果标记有值A,它应该存储在A下如果标记具有值B,则应将其存储在B下。我不确定如何为此问题编写jquery。我附上了一个小提琴和帖子。仅显示html和表格所需的格式。

<table style="width:300px">
    <tr>
        <td>Marks</td>
        <td>Value</td>
    </tr>
    <tr>
        <td>30</td>
        <td>a</td>
    </tr>
    <tr>
        <td>50</td>
        <td>a</td>
    </tr>
    <tr>
        <td>20</td>
        <td>a</td>
    </tr>
    <tr>
        <td>50</td>
        <td>b</td>
    </tr>
    <tr>
        <td>65</td>
        <td>b</td>
    </tr>
    <tr>
        <td>75</td>
        <td>b</td>
    </tr>
</table>

<br>Required Table format
<table style="width:300px">
    <tr>
        <th>a</th>
        <th>b</th>
    </tr>
</table>

http://jsfiddle.net/yzzp5/

1 个答案:

答案 0 :(得分:1)

试试这个,

    <table style="width:300px" id="marksId">
    <tr>
        <td>Marks</td>
        <td>Value</td>
    </tr>
    <tr>
        <td>30</td>
        <td>a</td>
    </tr>
    <tr>
        <td>50</td>
        <td>a</td>
    </tr>
    <tr>
        <td>20</td>
        <td>a</td>
    </tr>
    <tr>
        <td>50</td>
        <td>b</td>
    </tr>
    <tr>
        <td>65</td>
        <td>b</td>
    </tr>
    <tr>
        <td>75</td>
        <td>b</td>
    </tr>
</table>

<br>
Required Table format

    <table style="width:300px" id="reqtable">
        <tr>
            <td>a</td>
            <td>b</td>
        </tr>    
    </table>

你的脚本在这里

  $(function(){
        var data={'a':[],'b':[]};
        $('#marksId tr').each(function(index,tr){
            if($(tr).find('td').eq(1).text()=='a'){

                    data.a.push($(tr).find('td').eq(0).text());

            }
            if($(tr).find('td').eq(1).text()=='b'){

                    data.b.push($(tr).find('td').eq(0).text());

            }


        });
        var HTML='';
       // alert(JSON.stringify(data))
        // if both have equal counts
        $.each(data.a,function(idx,val){  
            HTML+='<tr><td>'+data.a[idx]+'</td><td>'+data.b[idx]+'</td></tr>';
        });
       // alert(HTML);
        $('#reqtable').append(HTML);
    });

您可能需要根据要求更改此代码,但它会让您了解

同时检查 Example here