从表中删除特定行答案

【问题标题】：Delete specific row from a table从表中删除特定行
【发布时间】：2018-06-28 16:41:20
【问题描述】：

我的代码需要一些帮助。我想在单击该行中的删除按钮时删除该行，但不知道该怎么做。

<tbody id="myTable">
        <?php
            if (!isset($_SESSION)){
               session_start();
            }
            $conn=mysqli_connect("localhost","root","","dbname");

            $instS="Select cod_Produto,Nome_Produto,Marca,preço,Tipo_Produto_Id_tipo_produto from produto";
            $query = mysqli_query($conn,$instS);
            while ($row = mysqli_fetch_row ($query)){
              echo "<tr>";
              echo "<td>".$row[0]."</td> ";
              echo "<td>".$row[1]."</td>";
              echo "<td>".$row[2]."</td>";
              echo "<td>".$row[3]."</td>";
              echo "<td>".$row[4]."</td>";
              echo "<td> <center><a href='#'><button class='glyphicon glyphicon-remove' style='color:#D00000' </button></a></center></td>";
              echo "<td><center> <a href='#'><span class='glyphicon glyphicon-pencil'  style='color:#707070' >  </span></a></center></td>";
              echo "</tr>";
            }

        ?>
 </tbody>
</table>

【问题讨论】：

您只是想从 HTML 表中删除它还是从数据库中也删除它？
我不确定，但我也想从数据库中获取

标签： javascript php html-table

【解决方案1】：

<script>
    function SomeDeleteRowFunction(o) {
     //no clue what to put here?
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }
    </script>

    <table>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
    </table>

function SomeDeleteRowFunction(o) {
     //no clue what to put here?
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }

<table>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
    </table>

【讨论】：

【解决方案2】：

您可以使用 jQuery Traversing 方法从 html 中删除父元素。

jQuery Traversing Methods 和 jQuery Traversing

$(".delete-button").on("click", function(){
  $(this).parent().prevAll().parent().remove();
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
    <th>Delete</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td><button class='glyphicon glyphicon-remove delete-button' style='color:#D00000'></button></td>             
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td><button class='glyphicon glyphicon-remove delete-button' style='color:#D00000'></button></td>  
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
   <td><button class='glyphicon glyphicon-remove delete-button' style='color:#D00000'></button></td>  
  </tr>
</table>
</body>
</html>

【讨论】：

【解决方案3】：

这应该像这样与 jQuery 一起工作：

$( "tr" ).click(function() {
  $( this ).remove();
});

如何在您的项目中包含 jQuery：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

【讨论】：