如何設置用戶可以製作的表格行數限制？

Question

在我的html中，我有一個300px長的div。在這個div中，有一個輸入，按鈕和一個表格。輸入ID是「待辦事項」，按鈕ID是「addToDo」。但是，我想限制可以添加的待辦事項的數量，因爲在很多情況下，它超過了300像素的高度並繼續添加行。

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()返回元素的數組，並檢查他們有多少人，你需要檢查陣列。長度屬性。

更新時間：

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/