Блог

Главная - Вопросы по программированию - Jquery — изменение цвета фона и полей выбора

Jquery — изменение цвета фона и полей выбора

#jquery

#jquery

Вопрос:

У меня есть таблица jQuery с идентификатором =»myTable»,

Я хочу добиться двух вещей.

  1. На данный момент достаточно нажать на кнопку «выбрать», чтобы выбрать определенную строку таблицы. Я хочу, чтобы вы могли щелкнуть везде внутри строки таблицы, чтобы выбрать эту строку, а не просто нажать на кнопку.

  2. Цвет фона выбранной строки таблицы должен немедленно измениться после нажатия на кнопку «выбрать» или самой строки таблицы.

Это мой скрипт:

 $(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 = "<?php echo $id; ?>";
    var output4 = "<?php echo $status; ?>";

    $('#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);
      },
    });
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ответ №1:

Вы используете четыре параметра, используйте вместо них три. Целевой селектор должен быть разделен запятой, как и в CSS:

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

Также не используйте события щелчка внутри событий щелчка.

В целом:

 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 <tbody> 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: "<?= $id ?>",
        output4: "<?= $status ?>"
      },
      success: function(data) {
        console.log(data);
      }
    });
  });
  
});

Быстрая демонстрация:

 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 <tbody> 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: "<?= $id ?>",
        output4: "<?= $status ?>"
      },
      success: function(data) {
        console.log(data);
      }
    });
  });

});  
 .rowcolorbg td {
  background: fuchsia;
}  
 <table id="myTable">
  <tbody>
    <tr>
      <td>1</td><td>A</td><td>123</td><td>OK</td><td><button type="button" class="btnSelect">SEL</button></td>
    </tr>
    <tr>
      <td>2</td><td>B</td><td>654</td><td>OK</td><td><button type="button" class="btnSelect">SEL</button></td>
    </tr>
  <tbody>
</table> 


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Комментарии:

1. Спасибо, теперь все доступно для просмотра в строке. для фона -изменение цвета.

2. @Retros, которые вас интересуют .siblings() — см. Мою правку выше.