如何使用 jquery 从 table 中删除选定的行

Question

我有一个 table，我可以在其中动态添加行。我有每一行的复选框。我想删除选中的行。

我的html页面如下

                <table class="table">
                <thead>
                <tr>
                    <th></th>
                    <th>Loads</th>
                    <th>Quantity</th>
                    <th>Watts</th>
                    <th>Hours/day</th>
                    <th>Watt Hrs/day</th>
                <tr>
                </thead>
                    <tbody>
                <tr>
                    <td><input type="checkbox"></td>                        
                    <td>Fans</td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><span id="sum">0</span></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>                    
                    <td>Tubelights</td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><span id="sum">0</span></td>
                </tr>
                </tbody>
            </table>
            <form id="myform">
                <input type="text" id="name" placeholder="Name" required="true"/>
                <button type="submit" class="add-row">Add Row</button>
                <button id="remove" type="button">Reomve Selected</button>
            </form>

我的脚本如下

<script>ole="form"
    $(document).ready(function(){
        $(".nav-tabs a").click(function(){
        $(this).tab('show');
        });
    });
    $(document).ready(function(){
        $(":text").each(function() {
            $(this).keyup(function(){
                findTotals();
            });
        });
    });
    function findTotals() {
        $("tbody tr").each(function() {
            row_total = 1; 
            $("input:text",this).each(function() {
                if(!isNaN(parseFloat($(this).val()))){
                row_total *= parseFloat($(this).val());
                }
            }); 
            if(row_total == 1){
                row_total = 0;
            }
            $("#sum",this).html((row_total/24).toFixed(2));
        });
    }
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            if(name){
                var markup = "<tr><td><input type='checkbox'></td><td>"+ name +"</td><td><input type='text' class='form-control'></td><td><input type='text' class='form-control'></td><td><input type='text' class='form-control'></td><td><span id='sum'>0</span></td></tr>";
                $("table tbody").append(markup);
            }
            $('#myform').find('input:text').val(''); 
        });


    });
</script>

谁能帮我做这件事。

Answer 1

看看这个
在单击删除按钮时，您只需要执行此操作

$("input[type=checkbox]:checked").closest("tr").remove();

$('#remove').click( function(){
  $("input[type=checkbox]:checked").closest("tr").remove();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
                <thead>
                <tr>
                    <th></th>
                    <th>Loads</th>
                    <th>Quantity</th>
                    <th>Watts</th>
                    <th>Hours/day</th>
                    <th>Watt Hrs/day</th>
                <tr>
                </thead>
                    <tbody>
                <tr>
                    <td><input type="checkbox"></td>                        
                    <td>Fans</td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><span id="sum">0</span></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>                    
                    <td>Tubelights</td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><span id="sum">0</span></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>                        
                    <td>Fans</td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><span id="sum">0</span></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>                    
                    <td>Tubelights</td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><input type="text" class="form-control"></td>
                    <td><span id="sum">0</span></td>
                </tr>                
                </tbody>
            </table>
            <form id="myform">
                <input type="text" id="name" placeholder="Name" required="true"/>
                <button type="submit" class="add-row">Add Row</button>
                <button id="remove" type="button">Reomve Selected</button>
            </form>

如何使用 jquery 从 table 中删除选定的行

How to delete selected rows from a table using jquery

html

jquery

bootstrapping