JSFiddle - React, Tailwind, and code Playground

by MrTyzik

HTML

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td colspan="2">3</td>
        </tr>
    </tbody>
</table>
<p id=all></p>
<p id=only_colspan></p>
<p id=colspan_not_one></p>

CSS

td { border: 1px solid #111; }
td[colspan] { background: #faa; }
h2 { font-weight: bold; margin: 2px 0; }

JavaScript

var all = ['<h2>all</h2>'];
$('td').each(function(i, el) {
    all.push(i+": "+$(this).attr('colspan')+'<br>');
});
$('#all').html(all.join(''));

var only_colspan = ['<h2>only_colspan</h2>'];
$('td[colspan]').each(function(i, el) {
    only_colspan.push(i+": "+$(this).attr('colspan')+'<br>');
});
$('#only_colspan').html(only_colspan.join(''));

var colspan_not_one = ['<h2>colspan_not_one</h2>'];
$('td[colspan!=1]').each(function(i, el) {
    colspan_not_one.push(i+": "+$(this).attr('colspan')+'<br>');
});
$('#colspan_not_one').html(colspan_not_one.join(''));

alert($('tr').not(':has([colspan])').length)