jQuery + PHP，从表td中删除动态行，单击

Question

单击特定的行列时，我试图从表中删除行。 我正在使用.live（）以便删除从ajax请求添加的行。 它工作正常，我的问题是，该表来自php，具有两行，然后我可以插入新行并将其删除，但是当我删除php附带的行之一时，它将删除表中的所有行。

PHP：

<table id="listaEquipamentos">
<?php 
    if($this->listaEquipamentos){
     foreach ($this->listaEquipamentos as $equipamento) { 
      $UF = trim($equipamento['siglaUF']);?>
     <tr>
      <td><?php echo $equipamento['siglaUF'];?></td>
      <td><?php echo $equipamento['siglaLocalidade'];?></td>
      <td><?php echo $equipamento['siglaEstacao']?></td>
      <td><?php echo $equipamento['nomeEquipamento'];?></td>
      <td><?php echo $something; ?></td>
      <td align="center">
       <?php echo "<input class='bot1' type='button' value='X'> " ?>
      </td>
     </tr>
     <?php } ?>
    </table>

JavaScript：

$('#listaEquipamentos tr > td:nth-child(6)').live("click", function(){
 if(confirm("Do you want to remove this row?")){
  $(this).parent('tr').remove();
 }
});

$("#btnAddEquipamento").click(function(){
 var ok = 1;
 if($("#slcUF").val() == 0){
  alert("UF em Branco");
  ok = 0;
 } else if($("#slcLocalidade").val() == 0){
  alert("Localidade em Branco");
  ok = 0;
 } else if($("#slcEstacao").val() == 0){
  alert("Estacao em Branco");
  ok = 0;
 } else if($("#txtEquipamento").val() == ""){
  alert("Equipamento em Branco");
  ok = 0;
 } else if($("#slcEquipamento").val() == "0"){
  alert("Equipamentoo em Branco");
  ok = 0;
 }
 if(ok){
  if($("#slcAbrangencia").val() != ""){
   var toadd = $('#slcEquipamento option:selected').text();
   var existe = 0;

   $("#divListaEquipamento tr>td:nth-child(4)").each(function(index){
    if( $(this).text() == toadd)
     existe = 1;
        });

   if(existe != 1){

    var uf = $('#slcUF option:selected').text();
    var loc = $('#slcLocalidade option:selected').text();
    var est = $('#slcEstacao option:selected').text();
    if($("#slcEquipamento").val() > 0){
     $("#hdnEquipamento").val($("#slcEquipamento").val()+"||"+$('#slcEquipamento option:selected').text());
    }else{
     var equip = $('#txtEquipamento').val().substr(0,15);
     $("#hdnEquipamento").val(equip);
    }
    var tempLoc = loc.split("-");
    var tempEst = est.split("-");
    $("#hdnUF").val(uf.substr(0,2));
    $("#hdnLocalidade").val(tempLoc[0]);
    $("#hdnEstacao").val(tempEst[0]);
    $.post("/aplicacao/jm/index.php/janela/addequipamento", $("#frmNovaJanela").serialize(),
         function(data){
        if(data[0] != null){
         $(".tabResultado1 > tbody>tr:last").prev().append("<tr><td>"+data[1]+"</td><td>"+data[3]+"</td><td>"+data[5]+"</td><td>"+data[7]+"</td><td>"+data[8]+"</td><td><input class='bot1' type='button' value='X'></td></tr>");
         var total = parseInt($("#divListaEquipamento tr:last > td:nth-child(5)").text()) + parseInt(data[8]);
         $("#divListaEquipamento tr:last > td:nth-child(5)").text(total);
        }else alert("Problema ao gravar equipamento.")
        }, "json");    
   }else{
    alert('O Equipamento '+toadd+' já está na lista.');
   }
  }else{
   alert ("Favor Selecionar a Abrangencia.");
  }
 }
});

我已经尝试过：

$(this).parent('tr').remove();
$(this).parents('tr').remove();
$(this).parent().parent().remove();
$(this).closest('tr').remove();

Answer 1

我可能在做一些愚蠢的事情！ 我更改了一些内容，现在可以使用了！

$('#listaEquipamentos tr > td:nth-child(6)').live("click", function(){
    if(confirm("Deseja remover esta linha?")){
        $(this).parent('tr').remove(); ;
    }
});

$("#btnAddEquipamento").click(function(){
    var ok = 1;
    if($("#slcUF").val() == 0){
        alert("UF em Branco");
        ok = 0;
    } else if($("#slcLocalidade").val() == 0){
        alert("Localidade em Branco");
        ok = 0;
    } else if($("#slcEstacao").val() == 0){
        alert("Estacao em Branco");
        ok = 0;
    } else if($("#txtEquipamento").val() == ""){
        alert("Equipamento em Branco");
        ok = 0;
    } else if($("#slcEquipamento").val() == "0"){
        alert("Equipamentoo em Branco");
        ok = 0;
    }
    if(ok){
        if($("#slcAbrangencia").val() != ""){
            var toadd = $('#slcEquipamento option:selected').text();
            var existe = 0;

            $("#divListaEquipamento tr>td:nth-child(4)").each(function(index){
                if( $(this).text() == toadd)
                    existe = 1;
              });

            if(existe != 1){

                var uf = $('#slcUF option:selected').text();
                var loc = $('#slcLocalidade option:selected').text();
                var est = $('#slcEstacao option:selected').text();
                if($("#slcEquipamento").val() > 0){
                    $("#hdnEquipamento").val($("#slcEquipamento").val()+"||"+$('#slcEquipamento option:selected').text());
                }else{
                    var equip = $('#txtEquipamento').val().substr(0,15);
                    $("#hdnEquipamento").val(equip);
                }
                var tempLoc = loc.split("-");
                var tempEst = est.split("-");
                $("#hdnUF").val(uf.substr(0,2));
                $("#hdnLocalidade").val(tempLoc[0]);
                $("#hdnEstacao").val(tempEst[0]);
                $.post("/aplicacao/jm/index.php/janela/addequipamento", $("#frmNovaJanela").serialize(),
                           function(data){
                                if(data[0] != null){
                                    $("#listaEquipamentos > tbody:last").append("<tr><td>"+data[1]+"</td><td>"+data[3]+"</td><td>"+data[5]+"</td><td>"+data[7]+"</td><td>"+data[8]+"</td><td><input class='bot1' type='button' value='X'></td></tr>");
                                    var total = parseInt($("#totalCliente").val()) + parseInt(data[8]);
                                    $("#totalCliente").val(total);
                                }else alert("Problema ao gravar equipamento.")
                             }, "json");                
            }else{
                alert('O Equipamento '+toadd+' já está na lista.');
            }
        }else{
            alert ("Favor Selecionar a Abrangencia.");
        }
    }

Answer 2

尝试更改此：

  $(this).parent('tr').remove(); ;

至：

  $(this).parent().remove(); ;

Answer 3

您看过数据表吗？ 由于我已经切换到它，所以表操作非常容易，并且它为我提供了比我所关心的编程更多的功能。 我为您提供示例的特定页面是用于动态行选择（如果启用了分页，则跨页面）并删除选定的行。

通过使用数据表，我通过使用数据表（通过AJAX）将数据拉入到一个表中来实现此解决方案，按照链接中记录的方式进行选择，然后删除不仅是删除了如图所示的元素，而且还发送了一个Ajax调用返回到服务器以在表中删除。 数据表允许我通过内置的数据处理程序执行此操作，该处理程序会将$ _REQUEST变量传递给构建查询的页面，而我又可以使用该查询进行删除。