Question

我在类别的顶部有多个复选框。当用户'检查/选择'类别时，数据库中的相应列表将显示在下表中。

表格结构如下：

<table id="boxA">
  <tr>
    <th>Category</th>
        <table>
         <tr>
           <td>List 1</td>
         </tr>
         <tr>
           <td>List 2</td>
         </tr>
        <tr>
           <td>List 3</td>
         </tr>
        </table>
  </tr>
</table>

我的脚本如下，

<script>
       $("#slider1").change(function() {
       var value = $(this).val();
       sendtobox(value, $("input[type=checkbox]").val());
      });

    $("input[type=checkbox]").change(function() {  
     var selectedval = $(this).val();
     if($(this).is(":checked")) {
        var selectedtext = $(this).next().text();
        sendtobox(selectedval, $("#slider1").val());
     }
      else {
        **$("th."+selectedval).remove();**//controls removing from boxA

     }
    });
</script>

编辑：复选框标记

<ul class="box small-block-grid-2 medium-block-grid-3 large-block-grid-2">
                  <li><input type="checkbox" name="level[Primary]" id="level" class="level" value="1"><label>Primary</label></li>
                  <li><input type="checkbox" name="level[Upper Secondary]" id="level" class="level" value="2"><label>Upper Secondary</label></li>
                  <li><input type="checkbox" name="level[University]" id="level" class="level" value="3"><label>University</label></li>
                  <li><input type="checkbox" name="level[Lower Secondary]" id="level" class="level" value="4"><label>Lower Secondary</label></li>
                  <li><input type="checkbox" name="level[Pre University]" id="level" class="level" value="5"><label>Pre University</label></li>
                  <li><input type="checkbox" name="level[Other]" id="level" class="level" value="6"><label>Other</label></li>                 
              </ul>

HTML，根据呈现的'inspect element'

   <table id="boxA">
     <tbody>
      <tr>
       <th class="1 title">Primary</th>
      </tr>
      <tr>...</tr>
     </tbody>
      <tbody></tbody>
    </table>

我的：

<?php
$last_category = "";

echo"<table>;
while($row = mysqli_fetch_array($result)) {

    $levels=$row['level_name'];
    $levels_id=$row['level_id'];
    $subjects= $row['subject_name'];
    $subjects_id= $row['subject_id'];
   if($last_category != $levels) {
        $last_category = $levels;

        echo '<tr><th class="' . $q .' title">'. $levels .'</th>';

    }

    echo '<table id="inner"><tr><td>'. $subjects . '</td><td><input type="checkbox" name="sub['.$subjects_id.']" id="sub" value=""></td>';
    echo'<td><input type="textbox" name="rate2['.$subjects_id.']" class="rate2" value="'.$r.'" id="rate2"></td></tr></table>';

    if($last_category != $levels)
        echo '</tr>';
}


echo"</table>";
?>

这个（$("th."+selectedval).remove();）是控制要删除的元素的地方。目前它只删除<th>类别，列表仍然显示。如何删除未选中类别的整行？

感谢。

Answer 1

您的HTML无效。内部表直接位于<tr>内，并且无效。只有<td>和<th>元素（或脚本支持元素）应直接位于<tr>内。（reference）

此jsfiddle表示删除<tr>后内部表格不会被删除。它还显示内部表实际上不在外部表中（由于标记的结构无效）。

尝试移动内部表，使其位于<th>：

中

<table id="boxA">
  <tr>
    <th class="1">Category
        <table>
         <tr>
           <td>List 1</td>
         </tr>
         <tr>
           <td>List 2</td>
         </tr>
        <tr>
           <td>List 3</td>
         </tr>
        </table>
     </th>
  </tr>
</table>

然后您可以使用以下内容删除该行：

$('th.' + selectedval).closest('tr').remove();

我认为PHP中的逻辑有点偏差，无法正确生成行。您可以尝试以下方法：

<?php
$last_category = "";

echo "<table>";

while($row = mysqli_fetch_array($result)) {
    $levels=$row['level_name'];
    $levels_id=$row['level_id'];
    $subjects=$row['subject_name'];
    $subjects_id=$row['subject_id'];

    // Check if a new row should be started
    if($levels != $last_category) {
        // If this isn't the first row, close the previous row.
        if ($last_category != "") {
            echo '</th></tr>';
        }
        echo '<tr><th class="' . $q . ' title">' . $levels;
        $last_category = $levels;
    }

    echo '<table id="inner"><tr><td>' . $subjects . '</td><td><input type="checkbox" name="sub[' . $subjects_id . ']" id="sub" value=""></td>';
    echo '<td><input type="textbox" name="rate2[' . $subjects_id . ']" class="rate2" value="' . $r . '" id="rate2"></td></tr></table>';
}

// Close the last row.
echo '</th></tr>';
echo "</table>";
?>

Answer 2

如果$("th."+selectedval).remove();删除了th，并且您想删除包含它的行，那么您可以使用.closest() / .parent()

$("th."+selectedval).closest('tr').remove();
//or just $("th."+selectedval).parent.remove();

如评论中所述，您的html无效，因为嵌套表是tr元素的子元素，无效。

一种可能的解决方案是使用2个tr元素

<table id="boxA">
    <tr>
        <th>Category</th>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td>List 1</td>
                </tr>
                <tr>
                    <td>List 2</td>
                </tr>
                <tr>
                    <td>List 3</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

然后

$("th."+selectedval).parent().next().addBack().remove()

如果取消选中复选框，如何删除表格中的整行？

2 个答案: