title: Select the first html table row on page load using JS or JQUERY
body: <p>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. </p>
  
  <p>Here is my HTML CODE
  HTML </p>
  
  <pre><code>&lt;table id="tblCases"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;CASE KEY&lt;/th&gt;
              &lt;th&gt;DEPARTMENT CASE&lt;/th&gt;
              &lt;th&gt;DEPARTMENT&lt;/th&gt;
              &lt;th style="display: none;"&gt;DEPT CODE&lt;/th&gt;
              &lt;th style="display: none;"&gt;CHARGE&lt;/th&gt;
              &lt;th&gt;OFFENSE CODE&lt;/th&gt;
              &lt;th&gt;LAB CASE&lt;/th&gt;
              &lt;th&gt;INCIDENT REPORT DATE&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;p&gt;
      &lt;b&gt;Case Details&lt;/b&gt;
  &lt;/p&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Department Case 
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" name="Department Case #" id="txtDepartmentCase" value="" /&gt;
           &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Department
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select id="drpDepartment"&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Charge
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select id="drpCharge"&gt;
              &lt;/select&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Lab Case 
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" name="Lab Case" id="txtLabCase" value="" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              Incident Report Date
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="text" name="Incident Report Date" id="txtIncidentReportDate" value="" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input type="hidden" name="Case key" id="txtCaseKey" value="" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br /&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;input type="button" value="Edit" id="btnEdit" onclick="" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="button" value="Save" id="btnSave" onclick="SaveData(); this.form.reset();" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="button" value="Cancel" id="btnCancel" onclick="" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>Javascript/jquery </p>
  
  <pre class="lang-js prettyprint-override"><code>    $(function () {
                      ///&lt;summary&gt; Highlights the row when selected&lt;/summary&gt;
                      ///&lt;param name="editing" type="text"&gt;Editing state&lt;/param&gt;
                      ///&lt;returns type="text"&gt;&lt;/returns&gt;
                      $('#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 &lt; table.rows.length; i++) {
                      ///&lt;summary&gt;Display selected row data in text input.&lt;/summary&gt;
                      ///&lt;param name="editing" type="text"&gt;Editing state&lt;/param&gt;
                      /// &lt;returns type="text"&gt;&lt;/returns&gt;
                      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) {
                      ///&lt;summary&gt;Defines the editing state which inlcude the behavior of buttons, input fields and row selection if a certain button was clicked&lt;/summary&gt;
                      ///&lt;param name="editing" type="button; text"&gt;Editing state&lt;/param&gt;
                      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);
                  }
  </code></pre>