Jquery- change background color and selection fields

Question

I have a jQuery table with the id="myTable",

I want to achieve two things.

At the moment just a click on the "select" button is choosing a certain table row. I want that you can click everywhere inside the table row to select this one, not just a click on the button.
The background color of the selected table row should immediately change after click on the "select" button or the table row itself.

This is my script:

$(document).ready(function() {

  // code to read selected table row cell data (values).
  $("#myTable").on('click', '.btnSelect', 'tr', function() {
    // get the current row
    var currentRow = $(this).closest("tr");

    var col1 = currentRow.find("td:eq(0)").html(); // get current row 1st table cell TD value
    var col2 = currentRow.find("td:eq(1)").html(); // get current row 2nd table cell TD value
    var col3 = currentRow.find("td:eq(2)").html(); // get current row 3rd table cell  TD value
    var output1 = col1;
    var output2 = col2;
    var output3 = "";
    var output4 = "";

    $('#myTable tr').click(function(e) {
      $('#myTable tr').removeClass('rowcolorbg');
      $(this).addClass('rowcolorbg');
    });

    $.ajax({
      type: "POST",
      url: "ajax-callback.php",
      data: {
        output1: output1,
        output2: output2,
        output3: output3,
        output4: output4
      },

      success: function(data) {
        console.log(data);
      },
    });
  });
});

user_383904 · Answer

You're using four params, use three instead. The target selector should be comma separated, just like you would do in CSS:

$("#myTable").on("click", ".btnSelect, tr", function() {

Also don't use click events inside click events.

All in all:

jQuery(function($) {

  // code to read selected table row cell data (values).
  $("#myTable").on("click", ".btnSelect, tr", function(ev) {
    ev.preventDefault();

    const $row = $(this).closest("tr");
    $row.siblings().removeClass("rowcolorbg"); // Other  TR elements
    $row.addClass("rowcolorbg");

    $.ajax({
      type: "POST",
      url: "ajax-callback.php",
      data: {
        output1: $row.find("td:eq(0)").html(),
        output2: $row.find("td:eq(1)").html(),
        output3: "",
        output4: ""
      },
      success: function(data) {
        console.log(data);
      }
    });
  });
  
});

Quick demo:

jQuery(function($) {

  // code to read selected table row cell data (values).
  $("#myTable").on("click", "tr", function(ev) {
    ev.preventDefault();

    const $row = $(this).closest("tr");
    $row.siblings().removeClass("rowcolorbg"); // Other  TR elements
    $row.addClass("rowcolorbg");

    $.ajax({
      type: "POST",
      url: "ajax-callback.php",
      data: {
        output1: $row.find("td:eq(0)").html(),
        output2: $row.find("td:eq(1)").html(),
        output3: "",
        output4: ""
      },
      success: function(data) {
        console.log(data);
      }
    });
  });

});

.rowcolorbg td {
  background: fuchsia;
}

Jquery- change background color and selection fields

1 Answers