在HTML表中禁止用户添加重复值的一种常见解决方法是使用JavaScript。下面是一个使用JavaScript的示例代码:
HTML部分:
值
JavaScript部分:
function addValue() {
// 获取用户输入的值
var inputValue = document.getElementById("inputValue").value;
// 检查表格中是否已存在相同的值
var table = document.getElementById("table");
var tbody = document.getElementById("tbody");
var rows = tbody.getElementsByTagName("tr");
var isDuplicate = false;
for (var i = 0; i < rows.length; i++) {
var value = rows[i].cells[0].innerHTML;
if (value === inputValue) {
isDuplicate = true;
break;
}
}
// 如果不存在相同的值,则添加到表格中
if (!isDuplicate) {
var newRow = table.insertRow(-1);
var cell = newRow.insertCell(0);
cell.innerHTML = inputValue;
} else {
alert("该值已存在,请输入其他值!");
}
// 清空输入框
document.getElementById("inputValue").value = "";
}
这段代码中,首先获取用户输入的值,并遍历表格中的每一行,检查是否存在相同的值。如果存在相同的值,则弹出警告框提示用户输入其他值;如果不存在相同的值,则将该值添加到表格中。最后,清空输入框的值。
你可以将这段代码复制粘贴到一个HTML文件中进行测试。