Question

如果选中该行中的复选框，我会写一些代码来删除表格行。我试图让这个工作如下所示，但我在针对TR本身时遇到了麻烦。有人可以给我一个关于我做错的指针吗？或者我可能以最有效的方式接近这个？

$(".deleter").click( function() {
        $(".table1 td :checked").prop("checked") ? $(".row1")remove() : $(".msgbox").text("There is nothing to delete.");
    });

<div class="table1"><form>
            <table>
            <tr>
                <th>Primary</th>

                <th>Address</th>

                <th>Construction</th>

                <th>Town Grade</th>

                <th>Select All<br /><input type="checkbox" class="selectall" name="specialtable"></th>
            </tr>
            <tr class="row1">
                <td><input type="radio" name="primary_loc" /></td>

                <td>#501 - 2206 Eglinton Avenue, Scarborough, O.N. A1B2C3</td>

                <td>Fire Resistive</td>

                <td>2</td>

                <td><input type="checkbox" name="specialtable"></td>
            </tr>
            <tr class="row2">
                <td><input type="radio" name="primary_loc" /></td>

                <td>#501 - 2206 Eglinton Avenue, Scarborough, O.N. A1B2C3</td>

                <td>Fire Resistive</td>

                <td>2</td>

                <td><input type="checkbox" name="specialtable"></td>
            </tr>
            </table>
            </form>
            </div>

Answer 1

 $(".row1").remove()

您需要使用.remove（）而不仅仅是remove（）。

Answer 2

如果您的目标只是在单击其复选框后立即删除一行，则以下代码段即可完成。

请注意，您的复选框没有deleter类;我补充说。

＆＃13;

$('.deleter').click(function () {
    $(this).closest('tr').remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table1">
    <form>
        <table>
            <tr>
                <th>Primary</th>
                <th>Address</th>
                <th>Construction</th>
                <th>Town Grade</th>
                <th>Select All
                    <br />
                    <input type="checkbox" class="selectall" name="specialtable" />
                </th>
            </tr>
            <tr class="row1">
                <td>
                    <input type="radio" name="primary_loc" />
                </td>
                <td>#501 - 2206 Eglinton Avenue, Scarborough, O.N. A1B2C3</td>
                <td>Fire Resistive</td>
                <td>2</td>
                <td>
                    <input type="checkbox" name="specialtable" class="deleter" />
                </td>
            </tr>
            <tr class="row2">
                <td>
                    <input type="radio" name="primary_loc" />
                </td>
                <td>#501 - 2206 Eglinton Avenue, Scarborough, O.N. A1B2C3</td>
                <td>Fire Resistive</td>
                <td>2</td>
                <td>
                    <input type="checkbox" name="specialtable" class="deleter" />
                </td>
            </tr>
        </table>
    </form>
</div>

＆＃13;

Answer 3

您需要.deleter元素.msgbox元素。您可以将:checked psedo选择器与.length一起使用来检查是否检查了任何checkbox;如果有，则删除该行，否则输出消息。

$(".deleter").click(function() {
  $('.msgbox').empty();
  $(".table1 td :checked").length ? 
    $(".table1 td :checked").closest('tr').remove() : 
  $(".msgbox").text("There is nothing to delete.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="table1">
  <form>
    <table>
      <tr>
        <th>Primary</th>

        <th>Address</th>

        <th>Construction</th>

        <th>Town Grade</th>

        <th>Select All
          <br />
          <input type="checkbox" class="selectall" name="specialtable">
        </th>
      </tr>
      <tr class="row1">
        <td>
          <input type="radio" name="primary_loc" />
        </td>

        <td>#501 - 2206 Eglinton Avenue, Scarborough, O.N. A1B2C3</td>

        <td>Fire Resistive</td>

        <td>2</td>

        <td>
          <input type="checkbox" name="specialtable">
        </td>
      </tr>
      <tr class="row2">
        <td>
          <input type="radio" name="primary_loc" />
        </td>

        <td>#501 - 2206 Eglinton Avenue, Scarborough, O.N. A1B2C3</td>

        <td>Fire Resistive</td>

        <td>2</td>

        <td>
          <input type="checkbox" name="specialtable">
        </td>
      </tr>
    </table>
  </form>
</div>
<button class="deleter">Delete</button>
<div class="msgbox"></button>

Jquery代码不从表中删除TR

3 个答案: