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

Question

在我的 html 中，我有一个 300 像素长的 div。在这个 div 中，有一个输入、按钮和一个表格。输入 ID 为“toDo”，按钮 ID 为“addToDo”。但是，我想限制可以添加的todos的数量，因为很多之后，它超过了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";
  }

});

Answer 1

改变这一行：

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/