添加动态输入

Question

您好，我想动态添加 tbody，所以每次在plannedvisit 中输入数字时都会再添加一个 tbody 但我遇到了错误。到目前为止，我正在使用 jsf 和 javaScript：

我通过输入数字来调用 javascript 函数：

 <h:inputText type="number" id="plannedVisit" styleClass="form-control"
       onkeyup=" addInput('dynamicInput'); return false; " required="true" >
    </h:inputText>


<div class="form-group"><div class= "col-sm-6" >
    <div id="nextVisitTable" class="input-group table">
        <table id="nextVisitTable1" class="table" style="width:10%;margin-  top:-210px; margin-left:90px; overflow:auto;">
           <thead>
              <tr>
                 <th>Reason</th>
                 <th>Date</th>
                 <th>Time</th>                                          
               </tr>
          </thead>
      <tbody>
      <tr>
      <td><h:inputText type="number" class="reasonOfVisit" styleClass="form- control"
required="true">

        </h:inputText></td>
    <td><h:inputText type="date" class="reasonOfVisit" styleClass="form-control"required="true">

      </h:inputText></td>

   </tr>                                                
   </tbody>
   </table>   
   </div>                                       
</div>

这是脚本：

function addInput(divName){
           var counter = 1;
           console.log(counter);
           var limit = 3;
                 if(counter == limit){ 
                 alert("You have Reached the Limit");
                 }
                  else {
          var newdiv = document.createElement('tbody');
          newdiv.innerHTML = "<tr><td><h:inputText type="number" class="reasonOfVisit" styleClass="form-control" required="true">
                              </h:inputText></td>
                              <td><h:inputText type="date" class="reasonOfVisit" styleClass="form-control" required="true">
                              </h:inputText></td>
                              </tr>"; 
          counter++;   
     }
                }

错误是： 语法错误：缺少；声明之前 在这一行

newdiv.innerHTML = "<tr><td><h:inputText type="number....</tr>"

我不确定它是否正确，如果您有任何想法，请提供帮助。 谢谢

Answer 1

试试这个

var counter = 1,
    limit = 3;
function addInput(event)
{
    if(counter == limit){
        alert("You have Reached the Limit");
    }
    else {
        var newdiv = document.createElement('tbody');
        newdiv.innerHTML = '<tr><td><h:inputText type="number" class="reasonOfVisit" styleClass="form-control" required="true">
                      </h:inputText></td>
                      <td><h:inputText type="date" class="reasonOfVisit"   styleClass="form-control" required="true">
                      </h:inputText></td>
                      </tr>'; 
        counter++;
    }
}

window.onload = function() {
    var element = document.getElementById("plannedVisit");
    element.addEventListener("keyup", addInput, false);
};

和你的 HTML

<input type="number" id="plannedVisit" styleClass="form-control" >