Как я могу получить значение из ячейки при нажатии на другую ячейку в строке?

Question

У меня есть страница, на которой я создаю таблицу из php, которая развертывает результат предыдущего запроса. Показывает идентификатор в первом столбце. Я хочу, чтобы некоторые столбцы можно было нажимать, чтобы изменить значение, изменить его в базе данных и обновить страницу. Для этого появляется модальный Bootstrap, когда вы щелкаете по столбцам ссылок (те, у которых есть). Когда вы заполняете модальный режим, он отправляет информацию в скрипт JQuery, который вызывает страницу php через AJAX. Эта страница php может быть вызвана асинхронно для редактирования значения в базе данных, и для выполнения инструкции UPDATE SQL требуется новое значение и идентификатор строки.

Мне нужно отправить идентификатор строки, которую вы щелкнули, методу JQuery, который использует AJAX. Но в тот момент, когда я вызываю функцию, я не знаю, как отправить идентификатор в качестве параметра.

Я пытался найти идентификатор строки, по которой вы щелкаете, касаясь DOM через JQuery, добавляя идентификаторы в строки, но это слишком сложно для моего уровня.

Здесь php развертывает таблицу с информацией.

$resISDEFE = mysqli_query($conexion,"SELECT * FROM personal_isdefe WHERE proyecto=".$idProyecto);
        if($resISDEFE->num_rows>0){
                $index=0;
                while($isdefe = mysqli_fetch_assoc($resISDEFE)){
                    $resCategoria = mysqli_query($conexion,"SELECT * FROM categoria_isdefe WHERE id=".$isdefe['categoria']);
                    $categoria = $resCategoria->fetch_row();
                    $idISDEFE = $isdefe['id']; <-- I save the row's ID here -->
                    echo "<tr id='isdefe'>";
                    echo "<td><p>".$idISDEFE."</p></td>";
                    echo "<td><p>".$categoria[1]."</p></td>";
                    echo "<td><p>".$isdefe['edg']."</p></td>";
                    echo "<td><p><a data-toggle='modal' data-target='#modalConcepto'>".$isdefe['porcentaje']."%</a></p></td>";
                    echo "<td><p>".$isdefe['horas_contratadas']."</p></td>";
                    $importe_prestacion = $isdefe['horas_contratadas'] * $categoria[2];
                    echo "<td><p>".number_format($importe_prestacion,2,",",".")." €</p></td>";

                    echo "<td><p>".number_format(($isdefe['importe_variable']+$importe_prestacion),2,",",".")." €</p></td>";
                    echo "</tr>";


                }

Это модальный вид.

    <div class="modal fade" id="modalConcepto" role="dialog">
    <div class="modal-dialog modal-lg">
   <div class="modal-content">
    <div class="modal-header">
         <h4 class="modal-title">Editar concepto</h4>
    </div>
    <div class="modal-body">
   <div class="form-group">
  <textarea class="form-control" rows="10" id="newConcepto"></textarea><br>
   </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal" onclick='editConcepto(<?php $idISDEFE ?>)'>Guardar</button>
      <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
    </div>
  </div>
</div>

И это метод JQuery, который вызывается при нажатии «Guardar».

function newConcepto(id, newConcepto){
        if(newConcepto!=""){
            $.get("ajax/editarConceptoISDEFE.php?id="+id+"&con="+newConcepto, function(data){
                    if(data=="1"){
                        var time = setTimeout(function(){
                            location.reload();
                        },500);
                    }
                    else alert("Error al actualizar el concepto");
            });
        }
}

function editConcepto(id){
    var newConcepto = $('#newConcepto').val();
    newConcepto(id,newConcepto);
}
        }

Ожидаемый результат заключается в том, что при перезагрузке страницы вы можете увидеть измененное значение именно в той строке, по которой щелкнули ранее.

Answer 1

В этом вопросе многое происходит, но я собираюсь дать ему шанс, и вы можете направить меня в другом направлении, если это не то, что вы ищете.

Какчтобы получить значение другой ячейки в строке с помощью jQuery

Оберните ячейку, которую вы хотите получить, в какой-то идентификатор span или div (в моем примере это .span-of-other-cell).Используйте функцию jQuery .closest, чтобы получить «строку», а затем используйте .find, чтобы найти ваш идентификатор и его значение:

$(document).on('click', '.some-cell', function () {
   var id = $(this).closest('.table-row').find('.span-of-other-cell').val();
});

Некоторые полезные ссылки:

.closest: https://api.jquery.com/closest/

.find: https://api.jquery.com/find/

Как лично я храню идентификаторы для последующего использования

Я использую префикс html data-для атрибутов элемента.

<div data-id="12345"></div>

Если вы добавите атрибут data- в строку, приведенный выше javascript будет упрощен, а идентификатор визуально скрыт (хотя и доступен для всех, кто обладает базовыми навыками работы с браузером, поэтомуне предназначен для того, чтобы запутывать или быть в безопасности, если это необходимо):

$(document).on('click', '.some-cell', function () {
   var id = $(this).closest('.table-row').attr('data-id');
});

Дайте мне знать, если это поможет , или я неправильно понял, и мне нужно пойти в другом направлении с моим ответом.

Что касается передачи идентификатора в качестве параметра ...

Это действительно зависит от ваших целей.Если идентификатор не должен быть безопасным (и кажется, что он отображается в таблице, поэтому его не нужно защищать), то вы можете просто передать его обратно в PHP с AJAX, используя протокол GET:

// assume that var "id" is accessible from this ajax function
$.ajax({
   url: "script.php?id=" + id
});