Jquery - My tables wont update with User input

Question

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 class="container">
            <h1>Input your Favourite Book's Information</h1>
            <p Make sure that all information is valid></p>
        </div>
        <div class="row">
            <div class="indic">
                <input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
            </div>
            <div class="indic">
                <input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
            </div>
        </div>
        <div class="row1">
            <div class="colName">
                <table id="myTable" class="tableStruc table-bordered">
                    <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" class="btn btn-success">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.

This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, Oct 25 '22 at 13:10
In addition to above comments, always check the browser console for errors - F12 then select "Console". Make sure the "levels" drop down on the right has a tick next to "errors". You'll likely see something like: `Uncaught ReferenceError: $document is not defined` - if so, see @j08691 comment above. — freedomn-m, Oct 25 '22 at 13:13

score 1 · Accepted Answer · answered Oct 25 '22 at 13:18

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 class="container">
            <h1>Input your Favourite Book's Information</h1>
            <p Make sure that all information is valid></p>
        </div>
        <div class="row">
            <div class="indic">
                <input type="text" class="ourForm" placeholder="Book Title" id="bookTitle">
            </div>
            <div class="indic">
                <input type="text" class="ourForm" placeholder="Year of Publication" id="bookYear">
            </div>
        </div>
        <div class="row1">
            <div class="colName">
                <table id="myTable" class="tableStruc table-bordered">
                    <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" class="btn btn-success">Register Book</button>
    </body>
</html>

Jquery - My tables wont update with User input

1 Answers1