JSFiddle - React, Tailwind, and code Playground

by wirey00

HTML

<!-- Notice the structure of everything -->
<div id='container'>  <!-- AT DIV LEVEL -- This is the parent div of the table.. and ancestor div to everything inside the table -->
    <table> <!-- AT TABLE LEVEL -- one level up is the div.. one level down and you get the THEAD and TBODY -->
        <thead> <!-- AT THEAD LEVEL -- one level up is the table.. one level down and you get the tr -->
            <tr>  <!-- AT TR LEVEL -- one level up is the thead .. one level down and you get the th -->
                <th>Name</th>  <!-- AT TH LEVEL -- one level down and you get the tr and there are no levels below this -->
                <th>Age</th>  <!-- everything at the same level is a sibling -->
                <th>Sex</th>
                <th>Birthday</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bob</td>
                <td>20</td>
                <td>Male</td>
                <td>07/25/1992</td>
            </tr>
            <tr>
                <td>Carol</td>
                <td>23</td>
                <td>Female</td>
                <td>05/25/1989</td>
            </tr>
            <tr>
                <td>Sue</td>
                <td>18</td>
                <td>Female</td>
                <td>03/16/1994</td>
            </tr>
            <tr>
                <td>Jim</td>
                <td>25</td>
                <td>Male</td>
                <td>05/25/1987</td>
            </tr>
            <tr>
                <td>Wayne</td>
                <td>30</td>
                <td>Male</td>
                <td>03/16/1982</td>
            </tr>
        </tbody>
    </table>
<div>
        
<button>Click ME</button>

CSS

#container th,#container td {
 border: 1px solid red;
 padding: 0px 5px 0px 5px;    
}

#container th {
 background-color: grey;
}

#container td {
 background-color: lightblue;
}

JavaScript

// This is an example of how you get Carol

// I'm binding click event to button which is generic and probably not a good idea
// but I know this is the only button on my page and was just lazy
$('button').click(function() {
    // inside here "the function" is what we want to happen when we click the button
    
    // So if we want to get to Carol.. and lets say change the background color
    // this selector says starting at element with id=container
    // find any descendant tables 
    // then find any descendant tbodys 
    // then find all td that contains "Carol"
    // Since this is a selector, we only get the final result(a jQuery Object/ or Objects)
    $('#container table tbody td:contains(Carol)').css('background-color','yellow');
    
    
    // this will get all tr's under tbody
    //$('#container table tbody tr')
        
    // this will get all tr's under thead
    //$('#container table tbody tr')
     
    // We can also use direct child selectors - which will only get direct childs and nothing further down the DOM Structure
    //$('#container > table > tbody > tr') 
        
    // Traversing the DOM (traveling the DOM structure) is very important and can be done many ways
    // Here's another way you can get to Carol
    // $('#container table tbody tr').eq(1).children('td').eq(0).css('background-color','orange');
});


// Using jQuery selectors returns a collection(array) of jQuery objects.. jQuery objects allow you to use jQuery methods and chaining which I will probably either make this fiddle bigger or create a new one to show you