javascript - 未选中复选框时如何删除表中的整行？

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 根据渲染的“检查元素”

   <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>";
?>