通过单击按钮或在函数内部执行函数的Javascript执行

问题描述 投票:0回答:1

我一直在尝试做一些我认为非常简单的事情,但是不幸的是,我找不到合适的方法(我的PHP背景比jQuery / JS更强。

总体目标是添加一行,或者单击“添加更多”按钮,或者当用户单击任何自动完成字段时。

表代码为:

<div class="container">
 <table border='1' style='border-collapse: collapse;' id="myTable">
  <thead>
   <tr>
    <th>Product No</th>
    <th>Qty</th>
    <th>Description</th>
    <th>Price</th>
    <th>DEL</th>
   </tr>
  </thead>
  <tbody>
   <tr class='tr_input'>
    <td><input type='text' class='produitno' id='produitno_1' placeholder='Enter productno' size="12"></td>
    <td><input type='text' class='qty' id='qty_1' placeholder='Enter qty' size="5"></td>
    <td><input type='text' class='description' id='description_1' size="50" readonly="readonly" ></td>
    <td><input type='text' class='prix' id='prix_1' size="12" ></td>
    <td><button onclick = "deleteRow(this)">REMOVE</button></td>
   </tr>
  </tbody>
 </table>
 <br>
 <input type='button' value='Add more' id='addmore'>
</div>

脚本部分是:

<script>
 //Count as a global variable, not local
var count=1;

$(document).ready(function(){

 $(document).on('keydown', '.produitno', function() {

  var id = this.id;
  var splitid = id.split('_');
  var index = splitid[1];

  // Initialize jQuery UI autocomplete
  $( '#'+id ).autocomplete({
   source: function( request, response ) {
    $.ajax({
     url: "db/getDetails.php",
     type: 'post',
     dataType: "json",
     data: {
      search: request.term,request:1
     },
     success: function( data ) {
      response( data );
     }
    });
   },
   select: function (event, ui) {
    $(this).val(ui.item.label); // display the selected text
    var ID = ui.item.value; // selected value

    // AJAX
    $.ajax({
     url: 'db/getDetails.php',
     type: 'post',
     data: {ID:ID,request:2},
     dataType: "json",
     success:function(response){

      var len = response.length;

      if(len > 0){
       var produitno    = response[0]['produitno'];
       var description  = response[0]['description'];
       var prix         = response[0]['prix'];  

       // Set value to textboxes
           document.getElementById('description_'+index).value = description;
           document.getElementById('prix_'+index).value = prix;

       // ADD LINE

          }
     }
    });
    return false;
   }
  });
 });


 // Add more
 $('#addmore').click(function(){

  // Get last id 
  var produitno_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
  var split_id = produitno_id.split('_');

  // New index
  var index = Number(split_id[1]) + 1;

  // Create row with input elements
  var html = "<tr class='tr_input'><td><input type='text' size='12' class='produitno' id='produitno_"+index+"' placeholder='Enter produitno'></td><td><input type='text' size='5' class='qty' id='qty_"+index+"' placeholder='Enter qty'></td><td><input type='text' class='description' size='50' readonly='readonly' id='description_"+index+"' ></td><td><input type='text' size='12' class='prix' id='prix_"+index+"' ></td><td><button onclick='deleteRow(this)'>REMOVE</button></td></tr>";

  // Append data
  $('tbody').append(html);

  // Ajoute 1 à la variable count
  count++;
 });
});





function deleteRow(btn) {
    if (count > 1){
      var row = btn.parentNode.parentNode;
      row.parentNode.removeChild(row);
      count--;
    };
};



</script>

我本来是想创建一个单独的名为“添加行”的函数,默认情况下,该函数将由$('#addmore')按钮调用,或者在设置文本框值后立即执行。这是正确的做法还是有更好的办法?

javascript jquery
1个回答
0
投票

经过一整夜的睡眠,我终于找到了解决方案。我只是创建了一个单独的函数,该函数要么由按钮调用,要么在单击自动完成时执行。

...
       // Set value to textboxes
       document.getElementById('description_'+index).value = description;
       document.getElementById('prix_'+index).value = prix;
     addRow();
      }
     }
    });
    return false;
   }
  });
 });

 // Add more

$('#addmore')。click(addRow);

 // FUNCTION
 function addRow(){

  // Get last id 
  var produitno_id = $('.tr_input input[type=text]:nth-child(1)').last().attr('id');
  var split_id = produitno_id.split('_');

  // New index
  var index = Number(split_id[1]) + 1;

  // Create row with input elements
  var html = "<tr class='tr_input'><td><input type='text' size='12' class='produitno' id='produitno_"+index+"' placeholder='Enter produitno'></td><td><input type='text' size='5' class='qty' id='qty_"+index+"' placeholder='Enter qty'></td><td><input type='text' class='description' size='50' readonly='readonly' id='description_"+index+"' ></td><td><input type='text' size='12' class='prix' id='prix_"+index+"' ></td><td><button onclick='deleteRow(this)'>REMOVE</button></td></tr>";

  // Append data
  $('tbody').append(html);

  // Ajoute 1 à la variable count
  count++;
 }
 });
© www.soinside.com 2019 - 2024. All rights reserved.