JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<table>
<tr>
    <td width="20%">Row 1</td>
    <td></td>
    <td class='on'>X</td>
    <td class='on'>X</td>
</tr>    

<tr>
    <td>Row 2</td>
    <td class='on'>X</td>
    <td></td>
    <td></td>
</tr>    
<tr>
    <td>Row 3</td>
    <td class='on'>X</td>
    <td class='off'></td>
    <td class='on'>X</td>
</tr>    </table>

CSS

td {
    text-align: center;
}

JavaScript

var a = [];
$('td.on').each(function() {
    var n = $(this).index();
    a[n] = a[n] ? a[n] + 1 : 1;
});

var t = $('<tr>').appendTo('table');
$.each(a, function(i, n) {
    t.append($('<td>', { text: i === 0 ? 'total' : n }));
});