Question

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

var empid=[1,4,5]
var records = [{ "empid": 1, "fname": "X", "lname": "Y" }, { "empid": 2, "fname": "A", "lname": "Y" }, { "empid": 3, "fname": "B", "lname": "Y" }, { "empid": 4, "fname": "C", "lname": "Y" }, { "empid": 5, "fname": "C", "lname": "Y" }] ;

var empIdObj={};

empid.forEach(function(element) {
empIdObj[element]=true;
});

var filteredArray=[];

records.forEach(function(element) {
if(empIdObj[element.empid])
    filteredArray.push(element)
});

}）;

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/

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

1 个答案: