Quelqu'un peut-il aider à sélectionner la première ligne de mon tableau html au chargement de la page en utilisant jquery ou javascript. après le chargement de la page, il doit sélectionner / mettre en surbrillance la première ligne et mettre toutes les données de la ligne sélectionnée dans les zones de saisie.

Voici mon CODE 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>

Voici mon CODE JS, ici j'inclus la sélection onclick sur la table html et j'inclus également la fonction pour remplir les zones de saisie avec les données de la ligne sélectionnée.

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);
                }
0
Leo Derramas 8 nov. 2019 à 07:52

1 réponse

Voici quelque chose pour vous aider à démarrer:

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>
0
kapitan 8 nov. 2019 à 05:34