如何用JavaScript检查HTML表格姓名列是否存在重复数据

原代码核心问题 #

• 姓名重复校验选错列：用td:nth-child(1)选中的是序号（NO）列，而姓名在第二列，需改为td:nth-child(2)
• 重复校验结果未生效：仅标记found变量但未阻止后续添加，需将重复状态纳入checkInput的返回判断
• 变量未规范声明：tstudentname等变量未用let/const声明，会成为全局变量
• 表格列缺失：添加行时未创建location对应的td元素，导致列不完整
• 验证逻辑错误：姓名、下拉框的<=0判断不合理，且未在输入正确时移除错误样式

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="row gutters p-3">
        <div class="col-sm-4 col-12">
            <form name="myform" method="POST">
                <div class="form-group">
                    <label>STUDENT NAME</label>
                    <input type="text" class="form-control form-control-lg" id="tstudentname">
                </div>
            </div>
            <div class="col-sm-2 col-12">
                <div class="form-group">
                    <label>AGE</label>
                    <input type="number" class="form-control form-control-lg" id="tage">
                </div>
            </div>
            <div class="col-sm-2 col-12">
                <div class="form-group">
                    <label>LOCATION</label>
                    <select class="select-single js-states form-control" id="tlocation">
                        <option value="">请选择</option>
                        <option>NEW YORK</option>
                        <option>LA</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <button type="button" class="btn btn-success ms-3" onclick="AddRow()">ADD</button>

    <table class="table table-bordered table-striped mt-3 ms-3" id="mytable">
        <thead>
            <tr>
                <th>NO</th> 
                <th>STUDENT NAME</th>
                <th>AGE</th>
                <th>LOCATION</th>
            </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
    </table>

    <script>
        function checkInput(){
            let isEmpty = false;
            const tstudentname = document.getElementById("tstudentname").value.trim();
            const tage = document.getElementById("tage").value;
            const tlocation = document.getElementById("tlocation").value;

            // 清除之前的错误样式
            document.getElementById("tstudentname").classList.remove("is-invalid");
            document.getElementById("tlocation").classList.remove("is-invalid");
            document.getElementById("tage").classList.remove("is-invalid");

            if(tstudentname === ""){               
                document.getElementById("tstudentname").classList.add("is-invalid");
                isEmpty = true;
                document.getElementById("tstudentname").focus();
            }
            else if(tlocation === ""){                
                document.getElementById("tlocation").classList.add("is-invalid");
                isEmpty = true;
                document.getElementById("tlocation").focus();
            }
            else if(tage === "" || parseInt(tage) <= 0){
                document.getElementById("tage").classList.add("is-invalid");
                isEmpty = true;
                document.getElementById("tage").focus();
            }

            // 校验姓名是否重复
            let nameExists = false;
            document.querySelectorAll("#mytable tbody td:nth-child(2)").forEach(cell => {
                if(cell.innerText.trim() === tstudentname){
                    nameExists = true;
                    alert("Name Already Exists");
                }
            });

            // 输入为空或姓名重复时，返回true阻止添加
            return isEmpty || nameExists;
        }

        function AddRow(){
            if(!checkInput()){
                // 计算序号：表格总行数（含thead）即为下一个序号
                const number = document.getElementById("mytable").rows.length;

                const a = document.forms['myform']['tstudentname'].value.trim();
                const b = document.forms['myform']['tage'].value;
                const c = document.forms['myform']['tlocation'].value;
                
                const table = document.getElementById("tableBody");
                const row = document.createElement("tr");

                const c1 = document.createElement("td");
                const c2 = document.createElement("td");
                const c3 = document.createElement("td");
                const c4 = document.createElement("td");
                
                c1.innerText = number;
                c2.innerText = a;
                c3.innerText = b;
                c4.innerText = c;
                
                row.appendChild(c1);
                row.appendChild(c2);
                row.appendChild(c3);
                row.appendChild(c4);

                table.appendChild(row);

                // 清空表单输入，提升体验
                document.forms['myform']['tstudentname'].value = "";
                document.forms['myform']['tage'].value = "";
                document.forms['myform']['tlocation'].value = "";
            }
        }
    </script>
</body>
</html>

关键修正说明 #

• 列选择器修正：将td:nth-child(1)改为td:nth-child(2)，准确选中姓名列进行重复校验
• 校验逻辑闭环：把nameExists加入checkInput的返回值，确保姓名重复时直接阻止添加
• 变量规范：用const/let声明所有变量，避免全局变量污染
• 补全表格列：新增c4元素并添加到行中，保证表格列与表头对应
• 验证优化：
  • 移除姓名、下拉框的无效数值判断，仅校验空值
  • 每次验证前清除错误样式，避免提示残留
  • 年龄转为数值判断，确保输入有效性
• 体验升级：添加行后自动清空表单输入框

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