单击行中的其他单元格时如何从单元格中获取值?

时间:2019-05-23 11:33:52

标签: php jquery html ajax

我有一个页面,其中我使用php来部署上一个查询的结果。它在第一列中显示ID。我想要一些可单击的列来编辑值,在数据库中更改它并刷新页面。为此,当您单击链接列(带有的列)时,它将显示一个Bootstrap模式。当您填充模式时,它将信息发送到JQuery脚本,该脚本通过AJAX调用php页面。可以异步调用该php页面以编辑数据库中的值,并且它需要新值和行ID才能执行UPDATE SQL语句。

我需要将您单击的行的ID发送到使用AJAX的JQuery方法。但是当我调用函数时,我不知道如何将ID作为参数发送。

我试图通过触摸DOM通过JQuery向行中添加ID来找到您单击的行的ID,但这对于我的水平来说太复杂了。

这是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>

这是单击“ Guardar”时调用的JQuery方法。

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);
}
        }

预期结果是重新加载页面时,您可以在之前单击的行中看到更改后的值。

1 个答案:

答案 0 :(得分: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();
});

一些有用的链接:

.closesthttps://api.jquery.com/closest/

.findhttps://api.jquery.com/find/

我个人如何存储ID供以后使用

我将html的data-前缀用于元素属性。

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

如果将data-属性添加到行中,则上面的javascript会被简化,并且ID在视觉上是隐藏的(尽管对于具有基本浏览器技能的人来说都易于访问,因此这并不意味着难以理解或确保安全性如果需要):

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

让我知道这是否有帮助,或者我是否误解了,需要在回答时选择另一个方向。

关于将ID作为参数传回...

这实际上取决于您的目标。如果ID不需要安全(听起来好像是显示在表中,那么就不需要安全),那么您可以使用GET协议将其通过AJAX传递回PHP:

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