How to update a table data based on selected table row in jQuery?-CodePudding

I am having difficulties updating table data based on a table row selected by a user in jQuery.

Whenever the user clicks a row I want the data in the row to be shown in input fields. When I click edit button it will enable the input fields so that I can edit the table data and click the save button to finally update it.

$(document).ready(function() {
  //Highlight row when clicked
  $('#recentCasesTable tr').click(function() {
    $('#recentCasesTable tr').removeClass('highlighted');
    $(this).addClass('highlighted');

    var currentRow = $(this).closest("tr");
    $("#departmentCase").attr("value", (currentRow.find("td:eq(0)").text()));
    $("#department").attr("value", (currentRow.find("td:eq(1)").text()));
    $("#charge").attr("value", (currentRow.find("td:eq(2)").text()));
    $("#labCase").attr("value", (currentRow.find("td:eq(3)").text()));
    $("#incidentReportDate").attr("value", (currentRow.find("td:eq(4)").text()));
  });

  //Check if a row is highlighted
  $("#edit").click(function() {
    if (!$('input').val()) {
      alert("Please click a row.");
    } else {
      $("#departmentCase").prop('disabled', false);
      $("#department").prop('disabled', false);
      $("#charge").prop('disabled', false);
      $("#labCase").prop('disabled', false);
      $("#incidentReportDate").prop('disabled', false).datepicker();
      $("#edit").prop('disabled', true);
      $("#save").prop('disabled', false);
      $("#cancel").prop('disabled', false);
    }
  });

  $("#save , #recentCasesTable tr").click(function() {
    var currentRow = $(this).closest("tr");
    currentRow.find("td:eq(0)").text($("#departmentCase").val()   "helooo"); //Problem occurs Here
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<p id="demo"></p>
<table id="recentCasesTable">
  <tr>
    <th>Department Case Number#</th>
    <th>Department</th>
    <th>Charge</th>
    <th>Lab Case #</th>
    <th>Incident Report Date</th>
  </tr>
  <tr>
    <td>409-14595-2607-075</td>
    <td>FORI-PALMDALE</td>
    <td>BURGLARY</td>
    <td>13-000069</td>
    <td>05/08/2013</td>
  </tr>
  <tr>
    <td>567-28904-2607-075</td>
    <td>FORI-PALMDALE</td>
    <td>ILLEGAL DUMPING</td>
    <td>10-000869</td>
    <td>05/08/2013</td>
  </tr>
</table>

<fieldset>
  <legend><b>Case Details</b></legend>
  <table id="caseDetails">
    <tr>
      <td>Department Case #</td>
      <td><input type="text" id="departmentCase" name="departmentCase#" disabled="disabled" / value="" /></td>
    </tr>
    <tr>
      <td>Department</td>
      <td><input type="text" id="department" name="department" disabled="disabled" value="" /></td>
    </tr>
    <tr>
      <td>Charge</td>
      <td><input type="text" id="charge" name="charge" disabled="disabled" value="" /></td>
    </tr>
    <tr>
      <td>Lab Case #</td>
      <td><input type="text" id="labCase" name="labCase" disabled="disabled" value="" /></td>
    </tr>
    <tr>
      <td>Incident Report Date</td>
      <td><input type="text" id="incidentReportDate" name="incidentReportDate" disabled="disabled" value="" /></td>
    </tr>
  </table>
  <br/>

  <button id="edit" name="edit" type="submit" value="edit">Edit</button>
  <button id="save" name="save" type="submit" value="save" disabled="disabled">Save</button>
  <button id="cancel" name="cancel" type="submit" value="cancel" disabled="disabled">Cancel</button>
</fieldset>

CodePudding user response：

You need to "remember" which row was clicked to fill the inputs.

One option would be to use an immutable field such as a database ID - a field that gets copied to your inputs, but can't be changed by the user. Alternatively, set a property on the row so that it can be found again.

When #save is clicked, you can then update the previously remembered tr.

In fact, you are already doing this:

$(this).addClass('highlighted');

So your save button just needs to get the highlighted row and update the table:

  $("#save").click(function() {
    var currentRow = $("#recentCasesTable tr.highlighted");
    currentRow.find("td:eq(0)").text($("#departmentCase").val()); 
    //.. other fields

    $("#departmentCase").prop('disabled', true).val('');
    //.. other fields
  });

Updated snippet, for simplicity/demo, I've removed the other columns from the edit:

$(document).ready(function() {
  //Highlight row when clicked
  $('#recentCasesTable tr').click(function() {
    $('#recentCasesTable tr').removeClass('highlighted');
    $(this).addClass('highlighted');

    var currentRow = $(this).closest("tr");
    $("#departmentCase").val(currentRow.find("td:eq(0)").text());
  });

  //Check if a row is highlighted
  $("#edit").click(function() {
    if (!$('input').val()) {
      alert("Please click a row.");
    } else {
      $("#departmentCase").prop('disabled', false);
      $("#edit").prop('disabled', true);
      $("#save").prop('disabled', false);
      $("#cancel").prop('disabled', false);
      
      $("#departmentCase").val("for testing");
    }
  });

  $("#save").click(function() {
    var currentRow = $("#recentCasesTable tr.highlighted");
    currentRow.find("td:eq(0)").text($("#departmentCase").val());
    $("#departmentCase").prop('disabled', true).val('');
  });
});

tr.highlighted td { color: rebeccapurple }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<p id="demo"></p>
<table id="recentCasesTable">
  <tr>
    <th>Department Case Number#</th>
    <th>Department</th>
    <th>Charge</th>
    <th>Lab Case #</th>
    <th>Incident Report Date</th>
  </tr>
  <tr>
    <td>409-14595-2607-075</td>
    <td>FORI-PALMDALE</td>
    <td>BURGLARY</td>
    <td>13-000069</td>
    <td>05/08/2013</td>
  </tr>
  <tr>
    <td>567-28904-2607-075</td>
    <td>FORI-PALMDALE</td>
    <td>ILLEGAL DUMPING</td>
    <td>10-000869</td>
    <td>05/08/2013</td>
  </tr>
</table>

<fieldset>
  <legend><b>Case Details</b></legend>
  <table id="caseDetails">
    <tr>
      <td>Department Case #</td>
      <td><input type="text" id="departmentCase" name="departmentCase#" disabled="disabled" / value="" /></td>
    </tr>
  </table>
  <br/>

  <button id="edit" name="edit" type="submit" value="edit">Edit</button>
  <button id="save" name="save" type="submit" value="save" disabled="disabled">Save</button>
  <button id="cancel" name="cancel" type="submit" value="cancel" disabled="disabled">Cancel</button>
</fieldset>