如何设置用户可以创建的表行数限制

How can I set a limit on the number of table rows a user can make?

本文关键字：创建 何设置 设置 用户      更新时间：2023-09-26

在我的html中，我有一个300px长的div。在这个div中，有一个输入，按钮和一个表格。输入 ID 是"待办事项"，按钮 ID 是"addToDo"。但是，我想限制可以添加的待办事项数量，因为在许多之后，它超过了 300px 的高度并继续添加行。

var dailyTasks = document.getElementById("ToDo");
var toDoSpace = document.getElementById("toDospace");
document.getElementById("addToDo").addEventListener('click', function addToDo()
{
 var aToDo = document.getElementById("newToDo").value;
  ToDos.push(aToDo);
  var row = document.createElement("tr");
  toDoSpace.appendChild(row);
  var cell= row.insertCell(0);
  cell.innerHTML =  ToDos[0] +  "<div class ='counter'></div>";
 //this did not work 
  if(document.getElementsByTagName("tr") == 5)
  {
    cell.innerHTML = "too many TODos";
  }

}）;

更改此行：

if(document.getElementsByTagName("tr") == 5)

自：

if(document.getElementsByTagName("tr").length == 5)

getElementsByTagName()返回一个元素数组，要检查它们有多少，您需要检查该数组的 .length 属性。

更新：

.HTML：

<div id="ToDo">
  <h2>Daily Tasks</h2>
  <input id="newToDo" />
  <button id="addToDo">add ToDo</button>
  <table id="toDospace"></table>
  <div id="message"></div>
</div>

Javascript：

var toDoSpace = document.getElementById("toDospace");
document.getElementById("addToDo").addEventListener('click', function addToDo()
{
    var aToDo = document.getElementById("newToDo").value;
    if(document.getElementsByTagName("tr").length == 10)
  {
        document.getElementById('message').innerHTML = 'To many todos!';  
  }
  else if (aToDo === '')
  {
    document.getElementById('message').innerHTML = 'Cannot be empty!';
  }
  else
  {    
    var row = document.createElement("tr");
    toDoSpace.appendChild(row);
    var cell= row.insertCell(0);
    cell.innerHTML =  aToDo +  "<div class ='counter'></div>";      
    document.getElementById("newToDo").value = '';
        document.getElementById('message').innerHTML = '';
  }
});

工作小提琴示例：

https://jsfiddle.net/rwt9302c/2/

相关文章：