JSFiddle - React, Tailwind, and code Playground

by TheJoeFletch

HTML

<table class="top">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>
        
                <table class="nested">
                    <tr>
                        <td>1</td>
                        <td>2</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>4</td>
                    </tr>
                </table>
                        
                        </td>
                    </tr>
                </table>

<div id="results"></div>

CSS

table, td
{border:1px solid black;
padding: 20px;
margin: 20px;}

.nested td
{
    background-color:blue;}

JavaScript

var tbl = $(".top");
var r = $("div#results");

$(r).html("");

$(r).append("var tbl = $(\".top\")</br>")

$(r).append("$(tbl).find(\"td\").length:" + $(tbl).find("td").length.toString() + "</br>");

$(r).append("$(\"td\", tbl).length: " + $("td", tbl).length.toString() + "</br>");

$(r).append("$(tbl).children(\"tbody\").children(\"tr\").children(\"td\").length: " + $(tbl).children("tbody").children("tr").children("td").length.toString() + "</br>");

$(tbl).children("tbody").children("tr").children("td").css("background-color","red");//selects the proper elements that I am interested in