时间戳

首页 > 解决方案 > jQuery追加和删除动态表行，什么也没发生

jquery - jQuery追加和删除动态表行，什么也没发生

问题描述

我可以为一个表添加很多行。当我单击“添加”时，什么也没发生。我想添加许多行并删除行。这是我的源代码。

<script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA="crossorigin="anonymous"></script>
    <input class="form-control" type="input" id="id_subtema" name="id_subtema" placeholder="Nama SUb Tema" required="" readonly="">
    <input class="form-control" type="number" id="jumlah_soal" name="jumlah_soal" placeholder="Jumlah Soal" required="">
        <input type="button" class="btn btn-primary form-control add-row" value="Add">

<table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th align="center" width="25">Pilih</th>
                    <th>Sub Tema</th>
                    <th>Jumlah Soal</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" name="record"></td>
                    <td></td>
                    <td></td>
                </tr>
                @if($subtema_jadwal_count == 0)
                <tr>
                    <td colspan="3" align="center">Tambahkan Sub Tema Ujian</td>
                </tr>
                @endif
            </tbody>
        </table>
        <button type="button" class="delete-row">Delete Row</button>

<script type="text/javascript"> 
$(document).ready(function(){$(".add-row").click(function(){
            var id_subtema = $("#id_subtema").val();
            var jumlah_soal = $("#jumlah_soal").val();
            var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + id_subtema + "</td><td>" + jumlah_soal + "</td></tr>";
            $("table tbody").append(markup);
        });

        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });</script>

我按照这个步骤https://jsfiddle.net/ashikjs/q81w4hdr/6/但是我的源在运行时什么也没发生。我需要帮助，如何解决这个问题。

标签： jquerylaravel-5

解决方案

我已经尝试过一些东西。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows</title>
<style>
    table{
        width: 100%;
        margin: 20px 0;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 5px;
        text-align: left;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
            $("table tbody").append(markup);
        });
        
        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="Name">
        <input type="text" id="email" placeholder="Email Address">
        <input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>Name</td>
                <td>Email Address</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>
</body> 
</html>

推荐阅读