使用 JS 或 JQUERY 在页面加载时选择第一个 html 表格行

Question

有人可以帮助使用 jquery 或 javascript 在页面加载时选择我的 html 表的第一行吗？ 页面加载后，它应该选择/突出显示第一行并将所选行中的所有数据放入输入框。

这是我的 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 选择，还包含了用所选行中的数据填充输入框的功能。

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>