Jquery - My tables wont update with User input-CodePudding

I'm extremely new to HTML, CSS and jQuery and I'm trying to make a simple table which accepts user input, stores it in rows of my table in HTML and therefore generates a delete button in each row. Problem is that I cannot get it to work even though I follow the tutorials of my class as well as the YT tutorials step by step. So far my code is:

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="">
        <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
        <script src="js/index.js"></script>
            <title>Welcome to our library!</title>
    </head>
    <body>
        <div >
            <h1>Input your Favourite Book's Information</h1>
            <p Make sure that all information is valid></p>
        </div>
        <div >
            <div >
                <input type="text"  placeholder="Book Title" id="bookTitle">
            </div>
            <div >
                <input type="text"  placeholder="Year of Publication" id="bookYear">
            </div>
        </div>
        <div >
            <div >
                <table id="myTable" >
                    <thead>
                        <tr>
                            <th scope="col">Book Title</th>
                            <th scope="col">Year of Publication</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!--Table data will be input here-->
                    </tbody>
                </table>
        </div>
        <button type="button" id="regbtn" >Register Book</button>
    </body>
</html>

jquery @.js:

$document.ready(function(){

    var blankRow = "<tr><td>Nothing to display</td></tr>";
    $("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
    $("#regbtn").click(function(){
        var btitle = $("#bookTitle").val().trim();
        var byear = $("#bookYear").val().trim();

        if(btitle!="" && byear!=""){
            if($("#myTable tbody").children().children().length==1){
                $("#myTable tbody").html("");
            }
            var addRow = "<tr><td>" btitle "</td><td>" byear "</td><td><button class='rembtn'>Delete Row</button></td></tr>";

            $("#myTable tbody").append(addRow);
            $("#btitle").val("");
            $("#byear").val("");

            //rembtn function to remove the row and its contents
            $("rembtn").click(function(){
                $(this).parent().parent().remove();

                if($("#myTable tbody").children().children().length==0){
                    $("#myTable tbody").append(blankRow);
                }
            });
        }
        else{
            alert("Error: Please provide input for all fields")
        }
    });
});

I'd greatly appreciate any help on this matter.

CodePudding user response：

I got it working.
The problem you have is you used $document instead of $(document)
Also for your delete function, you can use an inline onclick function.

$(document).ready(function(){
    
    var blankRow = "<tr><td>Nothing to display</td></tr>";
    $("#myTable tbody").append(blankRow); //will add an ampty row every time the page reloads
    $("#regbtn").click(function(){
        var btitle = $("#bookTitle").val().trim();
        var byear = $("#bookYear").val().trim();

        if(btitle!="" && byear!=""){
            if($("#myTable tbody").children().children().length==1){
                $("#myTable tbody").html("");
            }
            var addRow = "<tr><td>" btitle "</td><td>" byear "</td><td><button class='rembtn' onclick='remove(this)'>Delete Row</button></td></tr>";

            $("#myTable tbody").append(addRow);
            $("#btitle").val("");
            $("#byear").val("");

            //rembtn function to remove the row and its contents
            
        }
        else{
            alert("Error: Please provide input for all fields")
        }
    });
});
function remove(elem){
    $(elem).parent().parent().remove();

    if($("#myTable tbody").children().children().length==0){
        var blankRow = "<tr><td>Nothing to display</td></tr>";
        $("#myTable tbody").append(blankRow);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="">
        <script src="https://code.jquery.com/jquery-3.6.1.js"></script>
        <script src="js/index.js"></script>
            <title>Welcome to our library!</title>
    </head>
    <body>
        <div >
            <h1>Input your Favourite Book's Information</h1>
            <p Make sure that all information is valid></p>
        </div>
        <div >
            <div >
                <input type="text"  placeholder="Book Title" id="bookTitle">
            </div>
            <div >
                <input type="text"  placeholder="Year of Publication" id="bookYear">
            </div>
        </div>
        <div >
            <div >
                <table id="myTable" >
                    <thead>
                        <tr>
                            <th scope="col">Book Title</th>
                            <th scope="col">Year of Publication</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!--Table data will be input here-->
                    </tbody>
                </table>
        </div>
        <button type="button" id="regbtn" >Register Book</button>
    </body>
</html>