Select 第一個 html 表行上的頁面加載使用 JS 或 JQUERY

Question

有人可以幫助 select 我的 html 表的第一行在頁面加載時使用 jquery 或 ZDEZDC9B9ED78DE2EEE178 頁面加載后，它應該選擇/突出顯示第一行並將所選行中的所有數據放入輸入框。

這是我的 HTML 代碼 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>

這是我的 JS 代碼，這里我在 html 表上包含 onclick 選擇，還包含 function 用於使用來自所選行的數據填充輸入框。

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

這里有一些東西可以幫助你開始：

 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>