Skip to content Skip to sidebar Skip to footer

Generate Table Row Break Conditionally

I have a with two cells that I want to display horizontally if device is computer or vertically if it's mobile. I borrowed a JS function to detect mobile from this an

Solution 1:

If you want to do only on initial load

function isMobile() {
    return true; // or false
}

$(function () {

    if (isMobile()) {
        $td = $('#tbl').find('#row1_item2').detach();
        $a = $('#row1').after(`<tr id="row2"></tr>`);

        $('#row2').append($td);
    }

    $('#row1_item2').css('display', 'table-row');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table id="tbl">
    <tr id="row1">
        <td id="row1_item1">a</td>
        <td id="row1_item2" style="display: none;">b</td>
    </tr>
</table>

Post a Comment for "Generate Table Row Break Conditionally"