按列名获取所有条目：HTML表

Question

I have a HTML table of the following format:-

+------+----------+----------+----------+
| name | subject1 | subject2 | subject3 |
+------+----------+----------+----------+
| xxx  | pass     | fail     | pass     |
| yyy  | pass     | pass     | pass     |
| zzz  | pass     | fail     | fail     |
+------+----------+----------+----------+

The table is dynamically created with json data obtained from the server. I create every with name tag containing the names of the subject since the number of subjects are not constant. Now, what I want to do is have lists corresponding to subjects.. say subject1[],2 and so on and these lists will contain the list of pass/fails associated with that subject... I can then compute the number of pass/fails for that subjects and draw graphs.

While I am aware that this:can be used to get all rows for a particular column,

$('#mytable tbody td:nth-col(4)')

This wont be useful if the number of columns are fixed. Kindly let me know how to accomplish this using jquery/JS. EDIT: data.json:-(if parsing can be done)

{"students": [{"student": John, "status": "pass", "subject": "english"},{"student": Joe, "status": "pass", "subject": "english"},{"student": Jill, "status": "fail", "subject": "french"}]}

Answer 1

I create every with name tag containing the names of the subject

As you're mentioning the name tag in all the elements you create, you can use the following selector:

$("[name='subject1']")

This will return you all elements which contains subject1 in its name attribute.

Instead of name attribute, if you use data-subject and store the subject name in that particular cell, then

$("[data-subject='subject1']")

This will return you all cells containing subject1.

Answer 2

As discussed in the comments, it will be much easier to aggregate the data from the original source (which is a JavaScript object in this case) rather than extracting it from its visual representation (the DOM in this case).

To group the data based on the subject of each student data:

var res = {};

for (var i in data.students)
{
    var item = data.students[i];
    var subject = item.subject;

    if (!res[subject])
        res[subject] = { passedCount: 0, failedCount: 0 };

    if (item.status == 'pass')
        res[subject].passedCount++;
    else
        res[subject].failedCount++;
}

See Fiddle