Select the first html table row on page load using JS or JQUERY

Question

Can someone help to select the the first row of my html table on page load using jquery or javascript. after the page loads, it should select/highlight the first row and put all of the data from the selected row to the input boxes.

Here is my HTML CODE HTML

<table id="tblCases">
    <thead>
        <tr>
            <th>CASE KEY</th>
            <th>DEPARTMENT CASE</th>
            <th>DEPARTMENT</th>
            <th style="display: none;">DEPT CODE</th>
            <th style="display: none;">CHARGE</th>
            <th>OFFENSE CODE</th>
            <th>LAB CASE</th>
            <th>INCIDENT REPORT DATE</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<p>
    <b>Case Details</b>
</p>
<table>
    <tr>
        <td>
            Department Case 
        </td>
        <td>
            <input type="text" name="Department Case #" id="txtDepartmentCase" value="" />
         </td>
    </tr>
    <tr>
        <td>
            Department
        </td>
        <td>
            <select id="drpDepartment">
            </select>
        </td>
    </tr>
    <tr>
        <td>
            Charge
        </td>
        <td>
            <select id="drpCharge">
            </select>
        </td>
    </tr>
    <tr>
        <td>
            Lab Case 
        </td>
        <td>
            <input type="text" name="Lab Case" id="txtLabCase" value="" />
        </td>
    </tr>
    <tr>
        <td>
            Incident Report Date
        </td>
        <td>
            <input type="text" name="Incident Report Date" id="txtIncidentReportDate" value="" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="hidden" name="Case key" id="txtCaseKey" value="" />
        </td>
    </tr>
</table>
<br />
<table>
    <tr>
        <td>
            <input type="button" value="Edit" id="btnEdit" onclick="" />
        </td>
        <td>
            <input type="button" value="Save" id="btnSave" onclick="SaveData(); this.form.reset();" />
        </td>
        <td>
            <input type="button" value="Cancel" id="btnCancel" onclick="" />
        </td>
    </tr>
</table>

Here is my JS CODE, Here I include the onclick selection on the html table and also I include the function for populating the input boxes with the data from the selected row.

Javascript/jquery

    $(function () {
                    ///<summary> Highlights the row when selected</summary>
                    ///<param name="editing" type="text">Editing state</param>
                    ///<returns type="text"></returns>
                    $('#tblCases tr').click(function () {
                        if (isEditing) {
                            return;
                        }
                        $('#tblCases tr').removeClass('selectedRow');
                        $(this).addClass('selectedRow');

                    });

                });

                var table = document.getElementById("tblCases");
                var rIndex;

                for (var i = 1; i < table.rows.length; i++) {
                    ///<summary>Display selected row data in text input.</summary>
                    ///<param name="editing" type="text">Editing state</param>
                    /// <returns type="text"></returns>
                    table.rows[i].onclick = function () {
                        if (isEditing) {
                            return;
                        }
                        rIndex = this.rowIndex;
                        console.log(rIndex);
                        document.getElementById("txtCaseKey").value = this.cells[0].innerHTML;
                        document.getElementById("txtDepartmentCase").value = this.cells[1].innerHTML;
                        document.getElementById("drpDepartment").value = this.cells[3].innerHTML;
                        document.getElementById("drpCharge").value = this.cells[5].innerHTML;
                        document.getElementById("txtLabCase").value = this.cells[6].innerHTML;
                        document.getElementById("txtIncidentReportDate").value = this.cells[7].innerHTML;

                    };
                }

function setEditingState(editing) {
                    ///<summary>Defines the editing state which inlcude the behavior of buttons, input fields and row selection if a certain button was clicked</summary>
                    ///<param name="editing" type="button; text">Editing state</param>
                    isEditing = editing;
                    // Disable or enable fields.
                    $('#txtDepartmentCase').attr('disabled', !editing);
                    $('#drpDepartment').attr('disabled', !editing);
                    $('#drpCharge').attr('disabled', !editing);
                    $('#txtLabCase').attr('disabled', !editing);
                    $('#txtIncidentReportDate').attr('disabled', !editing);
                    // Disable or enable buttons.
                    $('#btnEdit').attr('disabled', editing);
                    $('#btnSave').attr('disabled', !editing);
                    $('#btnCancel').attr('disabled', !editing);
                }

Answer 1

Here's something to get you started:

 var first_name = $('#source_table').find('tbody tr:first td:first').text(); var last_name = $('#source_table').find('tbody tr:first td:nth-child(2)').text(); var age = $('#source_table').find('tbody tr:first td:nth-child(3)').text(); $('#first_name').val(first_name); $('#last_name').val(last_name); $('#age').val(age);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="source_table" border="1"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Joe</td> <td>Hunt</td> <td>20</td> </tr> <tr> <td>Jane</td> <td>Middletow</td> <td>19</td> </tr> </tbody> </table> <br/> <table> <tr> <td>First Name:</td> <td><input type="text" id="first_name"></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" id="last_name"></td> </tr> <tr> <td>Age:</td> <td><input type="text" id="age"></td> </tr>