php - 动态表操作点击事件后隐藏分区不出现

Question

我正在使用 php 和 jquery 从 mysql 数据库中获取数据到表中。但是我想隐藏“详细信息”列，我希望在单击名为“显示详细信息”的按钮后在相应的表格行中向下滑动（出现）。下面的图片可能会清除我的想法：

我用于向下滑动的 jquery 代码是：

$(document).ready(function(){
    $("#get_details").click(function(){
        $("#get_details_button").slideToggle("slow");
      });
  });

我用来获取数据的代码是：

$sub_array = array();
$sub_array[] = $row["id"];
$sub_array[] = $row["product_name"].'<p id="get_details">'.$row["details"].'</p>';
$sub_array[] = '<button type="button" name="get_details_button" id="get_details_button" class="btn btn-success btn-xs get_details_button">Get Details</button>';
$data[] = $sub_array;
}

如果您需要，请随时询问任何其他代码。

html部分在这里：

            <table id="user_data" class="table table-bordered table-striped">
                 <thead>
                  <tr>
                   <th width="30%">Image</th>
                   <th width="50%">Product Name</th>
                   <th width="20%">get Details</th>
                  </tr>
                 </thead>
              </table>

标签： phpjqueryajax

Answer 1

您需要使用class标记p然后每当单击按钮时使用$(this).closest('tr').find(".get_details")获取p标记并显示/隐藏相同

演示代码：

$(document).ready(function() {
  //onclick of button
  $(".get_details_button").click(function() {
    //get p tag and show/hide it
    $(this).closest('tr').find(".get_details").slideToggle("slow");
  });
});

.get_details {
  display: none
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="user_data" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th width="30%">Image</th>
      <th width="50%">Product Name</th>
      <th width="20%">get Details</th>
    </tr>
  </thead>
  <tr>
    <td>1
    </td>
    <td>Soemthig,,
      <!--use class-->
      <p class="get_details">Soemthing.....</p>
    </td>
    <td><button type="button" name="get_details_button" class="btn btn-success btn-xs get_details_button">Get Details</button>
    </td>
  </tr>
  <tr>
    <td>2
    </td>
    <td>Soemthig,,2
      <p class="get_details">Soemthing2.....</p>
    </td>
    <td><button type="button" name="get_details_button" class="btn btn-success btn-xs get_details_button">Get Details</button>
    </td>
  </tr>
</table>