jQuery技术问题：表格无法通过用户输入实现更新求助

代码中的核心问题 #

1. jQuery初始化语法错误：$document.ready 缺少括号，正确写法是 $(document).ready，这个错误会导致所有jQuery代码无法执行。
2. 输入框选择器不匹配：清空输入时用了#btitle和#byear，但HTML中对应的输入框id是bookTitle和bookYear，导致输入框无法清空。
3. 删除按钮绑定问题：
   • 类选择器遗漏前缀.，写成了$("rembtn")，正确应为$(".rembtn")；
   • 每次点击注册按钮都会重复绑定删除事件，容易引发多次触发的问题，改用事件委托绑定到表格tbody上更可靠。
4. 表格结构不统一：表头仅定义2列，但添加的数据行包含3列（标题、年份、删除按钮），初始空白行的td未设置跨列，导致表格布局错乱。
5. HTML标签语法错误：<p Make sure that all information is valid> 错误地将内容写在属性位置，正确写法是<p>Make sure that all information is valid</p>。
6. 空行判断逻辑模糊：原代码通过children().children().length判断，改为直接统计数据行数量更清晰。

修正后的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>
                            <th scope="col">Actions</th> <!-- 添加操作列，匹配数据行结构 -->
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="blank-row"> <!-- 给空白行加类，方便后续判断 -->
                            <td colspan="3">Nothing to display</td> <!-- 跨3列显示提示 -->
                        </tr>
                    </tbody>
                </table>
            </div>
            <button type="button" id="regbtn" class="btn btn-success">Register Book</button>
        </div> <!-- 补上缺失的row1闭合标签 -->
    </body>
</html>

修正后的jQuery代码（index.js） #

$(document).ready(function(){
    // 用事件委托绑定删除按钮，支持动态生成的元素
    $("#myTable tbody").on("click", ".rembtn", function(){
        $(this).closest("tr").remove(); // closest比parent().parent()更直观
        
        // 判断是否还存在数据行，没有则重新添加空白行
        if($("#myTable tbody tr:not(.blank-row)").length === 0){
            $("#myTable tbody").html('<tr class="blank-row"><td colspan="3">Nothing to display</td></tr>');
        }
    });

    $("#regbtn").click(function(){
        var btitle = $("#bookTitle").val().trim();
        var byear = $("#bookYear").val().trim();

        if(btitle !== "" && byear !== ""){
            // 移除初始的空白行（如果存在）
            if($("#myTable tbody .blank-row").length > 0){
                $("#myTable tbody .blank-row").remove();
            }
            
            // 用模板字符串拼接行内容，可读性更好
            var addRow = `<tr><td>${btitle}</td><td>${byear}</td><td><button class='rembtn'>Delete Row</button></td></tr>`;
            $("#myTable tbody").append(addRow);
            
            // 清空输入框，使用正确的id选择器
            $("#bookTitle").val("");
            $("#bookYear").val("");
        } else {
            alert("Error: Please provide input for all fields");
        }
    });
});

内容的提问来源于stack exchange，提问作者Brainmated