JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<table cellpadding="2" style="width: 100%;">
    <tbody id="tbody-search-results">
        <tr class="ui-widget-header">
            <th style="width: 25%;">Domain Name</th>
            <th style="width: 25%;">Result</th> 
            <th style="width: 25%;">Order Options</th>           
        </tr>
        <tr style="" data-domain="test_com">
            <td>test.com</td>
            <td>Loading...</td>
            <td></td>
       </tr>
    </tbody>
</table>

JavaScript

$('#tbody-search-results tr[data-domain="test_com"] td:nth-child(2)').text('registered');

$('.ui-widget-header th:nth-child(2)').css('color', 'red');

// Added by David:
// First adding a select to the table...
$('<select class="test"></select').appendTo($('#tbody-search-results tr[data-domain="test_com"] td:nth-child(3)'));

console.log( 'tr:nth-child(1): %o', $('tr:nth-child(1)').attr('class') );
console.log( 'class of inserted select using td:last selector: %o', $('#tbody-search-results tr[data-domain="test_com"] td:last select').attr('class'));
console.log( 'html of td:nth-child(3): %o',
   $('#tbody-search-results tr[data-domain="test_com"] td:nth-child(3)').html());
console.log( 'selecting select length: %d',
   $('#tbody-search-results tr[data-domain="test_com"] td:nth-child(3) select').length);