Question

我正在使用basic datatable打印从后端接收的动态值。对于每一行，我也都有一个隐藏的子行，并带有该父行的一些其他值。每个父行中都有一个按钮，我希望单击该链接后，该父行的子项应展开并且对用户可见。每行都会发生这种情况。这里是fiddle

但是，当我单击该按钮时，子行未打开。谁能帮我解决这个问题

$('table').on('click', 'tr.parent .det', function() {
  $(this).closest('tr.cchild').toggleClass('open');
});

.cchild {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
      <th>Experience</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach($per_job as $job): ?>
    <tr class="parent">
      <td>
        <?php echo $job->name; ?>
      </td>
      <td>
        <?php echo $job->location; ?>
      </td>
      <td>
        <?php echo $job->experience; ?>
      </td>
      <td>
        <button class="show-btn rd-details det">
                DETAILS
              </button>
      </td>
    </tr>

    <tr class="cchild">
      <td>
        <?php echo $job->age; ?>
      </td>
      <td>
        <?php echo $job->class; ?>
      </td>
      <td>
        <?php echo $job->address; ?>
      </td>
      <td>
        <?php echo $job->number; ?>
      </td>
    </tr>
    <?php endforeach; ?>
  </tbody>
</table>

Answer 1

据我所知，您尚未在任何地方定义打开的类，因此只需在现有CSS中定义该类即可。

.open{
  display:block !important;
}

display属性指定是否/如何显示元素。

每个HTML元素都有默认的display值，具体取决于元素的类型。大多数元素的默认display值为block或inline。当您声明对象具有display none时，就像您将CSS用于cchild一样，代码将隐藏该对象。

现在要显示对象，您可以删除现有的类，也可以使用其他类或样式覆盖现有的类。为此，您正在使用open'display'切换类block。用简单的语言显示和隐藏对象。可以找到更多信息here。

无法展开和折叠子行

1 个答案: