JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<table>
    <tbody attributes="size">
        <tr>
            <th>Dans ce tbody, certaines rangées sont "disabled", d'autres non. Donc il doit être affiché, mais les rangées "disabled" doivent être masquées.</th>
        </tr>
        <tr class="headings">
            <th>Name</th>
            <th>Selector</th>
        </tr>
        <tr>
            <td rowspan="1" class="vertical-attribute">A</td>
            <td rowspan="1" class="horizontal-attribute">
                <input class="product-quantity" type="number" disabled="disabled">
            </td>
        </tr>
        <tr>
            <td rowspan="1" class="vertical-attribute">B</td>
            <td rowspan="1" class="horizontal-attribute">
                <input class="product-quantity" type="number">
            </td>
        </tr>
        <tr>
            <td rowspan="1" class="vertical-attribute">C</td>
            <td rowspan="1" class="horizontal-attribute">
                <input class="product-quantity" type="number">
            </td>
        </tr>
        <tr>
            <td rowspan="1" class="vertical-attribute">D</td>
            <td rowspan="1" class="horizontal-attribute">
                <input class="product-quantity" type="number" disabled="disabled">
            </td>
        </tr>
    </tbody>
    <tbody attributes="size">
        <tr>
            <th>Toutes les rangées sont "disabled", le tbody doit donc être entièrement masqué.</th>
        </tr>
        <tr class="headings">
            <th>Name</th>
            <th>Selector</th>
        </tr>
        <tr>
            <td rowspan="1" class="vertical-attribute">A</td>
            <td rowspan="1" class="horizontal-attribute">
                <input class="product-quantity" type="number" disabled="disabled">
            </td>
        </tr>
        <tr>
            <td rowspan="1" class="vertical-attribute">B</td>
            <td rowspan="1" class="horizontal-attribute">
                <input class="product-quantity" type="number"...

JavaScript

/* cache la rangée lorsqu'input disabled */

$('input.product-quantity:disabled').closest('tr').hide();

/* variable pour le input */
var e = $('input').not('[disabled="disabled"]');

/* variable pour l'attribut taille */

var montbody = $('tbody[attributes="size"]');

/* si le tbody a plus de 0 input non-désactivés, le tbody est affiché, sinon il ne l'est pas
 */
$("table tbody").each(function() {
    if ($(this).find(" tr:visible").length <= 2) {
        $(this).css('visibility', 'hidden');
    }
});