Question

动态添加文本框以单击+或 - 文本框的值不会增加单个值，而是增加文本的数量。

HTML

<table class="table table-striped">
  <thead>
    <tr>
      <th class="qColonna">Quantità</th>
      <th>Categoria</th>
      <th>Variazione</th>
    </tr>
  </thead>
  <tbody id="tblVariazioniPranzo">
    <tr>
      <td>
        <div class="quantity-widget">
          <div class="btn btn-default less">-</div> 
          <input type="text" value="0" name="qVariazionePranzo[]" class="max30"> 
          <div class="btn btn-default more">+</div>
        </div>
      </td>
      <td>
        <select placeholder="Categoria" name="nCategoriaVariazionePranzo[]" id="categoriaPranzo">
          <option value="0">Categoria</option>
          <option value="1">Antipasti</option>
          <option value="2">Primi</option>
          <option value="3">Secondi</option>
          <option value="4">Contorni</option>
          <option value="5">Dessert</option>
        </select>
      </td>
      <td>
        <input type="text" name="dVariazionePranzo[]" placeholder="Variazione" class="largoTOT">
      </td>
    </tr>
  </tbody>                                    
  <tbody>
    <tr>
      <td colspan="3">
        <button type="button" class="btn btn-success" onclick="addRow('tblVariazioniPranzo')" name="aggiungiPranzo" value="+">+</button>
      </td>
    </tr>
  </tbody>
</table>

javascript （动态添加行）

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 20){                            // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i <colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    }else{
         alert("Maximum Passenger per ticket is 20");

    }
}

jQuery （增加每个文本框的数量）

var currval;
$(".quantity-widget .less").click(function(){
    currval = parseInt($(this).parent().find("input").val());
    if (currval > 0){
    $(this).parent().find("input").val((currval-1));
    }
});
$(".quantity-widget .more").click(function(){
    currval = parseInt($(this).parent().find("input").val());    
    $(this).parent().find("input").val((currval+1));
});

如何始终添加数量？

Answer 1

您必须使用事件委派 on() 来处理动态添加到页面的元素：

$("body").on('click','.less',function(){
//AND
$("body").on('click','.more',function(){

还将您的活动置于准备好的功能中：

$(function(){
    //Your events here
})

希望这有帮助。

＆＃13;

$(function(){
  var currval;

  $("body").on('click','.less',function(){
    currval = parseInt($(this).parent().find("input").val());
    if (currval > 0){
      $(this).parent().find("input").val((currval-1));
    }
  });

  $("body").on('click','.more',function(){
    currval = parseInt($(this).parent().find("input").val());    

    $(this).parent().find("input").val((currval+1));
  });
})

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  if(rowCount < 20){                            // limit the user from creating fields more than your limits
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;
    for(var i=0; i <colCount; i++) {
      var newcell = row.insertCell(i);
      newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
  }else{
    alert("Maximum Passenger per ticket is 20");

  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
  <thead>
    <tr>
      <th class="qColonna">Quantità</th>
      <th>Categoria</th>
      <th>Variazione</th>
    </tr>
  </thead>
  <tbody id="tblVariazioniPranzo">
    <tr>
      <td>
        <div class="quantity-widget">
          <div class="btn btn-default less">-</div> 
          <input type="text" value="0" name="qVariazionePranzo[]" class="max30"> 
          <div class="btn btn-default more">+</div>
        </div>
      </td>
      <td>
        <select placeholder="Categoria" name="nCategoriaVariazionePranzo[]" id="categoriaPranzo">
          <option value="0">Categoria</option>
          <option value="1">Antipasti</option>
          <option value="2">Primi</option>
          <option value="3">Secondi</option>
          <option value="4">Contorni</option>
          <option value="5">Dessert</option>
        </select>
      </td>
      <td>
        <input type="text" name="dVariazionePranzo[]" placeholder="Variazione" class="largoTOT">
      </td>
    </tr>
  </tbody>                                    
  <tbody>
    <tr>
      <td colspan="3">
        <button type="button" class="btn btn-success" onclick="addRow('tblVariazioniPranzo')" name="aggiungiPranzo" value="+">+</button>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

编辑动态文本值jQuery

1 个答案: