动态输入javascript函数

Question

我在使用jQuery函数乘法（数学）与动态创建的输入（再次使用jQuery创建）时遇到问题。我无法让我的函数绑定到新的输入。对于第一行它的工作，但对于第二行它不起作用（第二行和更多使用动态输入）。

这里我的html代码

<table class="table table-condensed" style="margin-left: 10px;"> 
     <thead> 
      <tr> 
      <th width="100px">Nama</th> 
      <th width="100px">Kode</th> 
      <th width="100px">Harga</th> 
      <th width="100px">Jumlah</th> 
      <th width="100px">Total</th> 
      <th width="80px"></th> 
      </tr> 
     </thead> 

     <tbody id='itemlist' > 
      <tr> 
      <td><input id='nama' name='nama_input[]' class='form-control' /></td> 
      <td><input id='kode' readonly name='kode_input[]' class='form-control' /></td> 
      <td><input id='harga' name='harga_input[]' class='form-control' onkeyup="sum();" /></td> 
      <td><input id='jumlah' autocomplete="off" name='jumlah_input[]' class='form-control' onkeyup="sum();" /></td> 
      <td><input id='total' name='total_input[]' class='form-control' value=" " /></td> 
      <td></td> 
      </tr> 
     </tbody> 

     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td> 
      <button type="button" class="btn btn-default" onclick="additem(); return false"> 
       <b>Tambah</b> 
      </button> 
      </td> 
     </tr> 
     </table> 

这我的剧本

function additem() { 


//menentukan target append 
var itemlist = document.getElementById('itemlist'); 

//    membuat element 
var row = document.createElement('tr'); 
var nama = document.createElement('td'); 
var kode = document.createElement('td'); 
var harga = document.createElement('td'); 
var jumlah = document.createElement('td'); 
var total = document.createElement('td'); 
var aksi = document.createElement('td'); 


//    meng append element 
itemlist.appendChild(row); 
row.appendChild(nama); 
row.appendChild(kode); 
row.appendChild(harga); 
row.appendChild(jumlah); 
row.appendChild(total); 
row.appendChild(aksi); 

//    membuat element input1 
var nama_input = document.createElement('input'); 
nama_input.setAttribute('name', 'nama_input[]'); 
nama_input.setAttribute('class', 'form-control'); 

var kode_input = document.createElement('input'); 
kode_input.setAttribute('name', 'kode_input[]'); 
kode_input.setAttribute('readonly', ''); 
kode_input.setAttribute('class', 'form-control'); 

var harga_input = document.createElement('input'); 
harga_input.setAttribute('name', 'harga_input[]'); 
harga_input.setAttribute('class', 'form-control'); 
harga_input.setAttribute('onkeyup', 'sum();'); 


var jumlah_input = document.createElement('input'); 
jumlah_input.setAttribute('name', 'jumlah_input[]'); 
jumlah_input.setAttribute('class', 'form-control'); 
jumlah_input.setAttribute('autocomplete', 'off'); 
jumlah_input.setAttribute('onkeyup', 'sum();'); 


var total_input = document.createElement('input'); 
total_input.setAttribute('name', 'total_input[]'); 
total_input.setAttribute('class', 'form-control'); 
total_input.setAttribute('readonly', ''); 

var hapus = document.createElement('span'); 

//    meng append element input 
nama.appendChild(nama_input); 
kode.appendChild(kode_input); 
harga.appendChild(harga_input); 
jumlah.appendChild(jumlah_input); 
total.appendChild(total_input); 
aksi.appendChild(hapus); 

hapus.innerHTML = '<button class="btn btn-small btn-default"><b>Hapus</b></button>'; 
//    membuat aksi delete element 
hapus.onclick = function() { 
    row.parentNode.removeChild(row); 
}; 


var namaid = 'nama' + (Math.floor((1 + Math.random()) * 0x10000)); 
var kodeid = 'kode' + (Math.floor((1 + Math.random()) * 0x10000)); 
var hargaid = 'harga' + (Math.floor((1 + Math.random()) * 0x10000)); 
var jumlahid = 'jumlah' + (Math.floor((1 + Math.random()) * 0x10000)); 
var totalid = 'total' + (Math.floor((1 + Math.random()) * 0x10000)); 
nama_input.setAttribute('id', namaid); 
kode_input.setAttribute('id', kodeid); 
harga_input.setAttribute('id', hargaid); 
jumlah_input.setAttribute('id', jumlahid); 
total_input.setAttribute('id', totalid); 

function sum() { 
      var hrg = document.getElementById('hargaid').value; 
      var jml = document.getElementById('jumlahid').value; 
      var result = parseInt(hrg) * parseInt(jml); 
      if (!isNaN(result)) { 
      document.getElementById('totalid').value = result; 
     } 
     } 

$("#" + namaid).autocomplete({ 
    source: "get_barang.php", 
    minLength: 2, 
    select: function(event, ui) { 
    $("#" + kodeid).val(ui.item.kode); 
    $("#" + hargaid).val(ui.item.harga); 
    } 
}); 



i++; 

}

任何帮助表示赞赏。

Answer 1

您不会将当前id的输入传递给sum方法。还有一件事就是将jquery onkeyup事件添加到您的动态输入中。请参考下面的代码 -

$(function() { 
 
    $('#sample').on('click',additem) 
 
    $("#nama").autocomplete({ 
 
     source: "get_barang.php", 
 
     minLength: 2, 
 
     select: function(event, ui) { 
 
     $('#kode').val(ui.item.kode); 
 
     $('#harga').val(ui.item.harga); 
 
     } 
 
    }); 
 
    }); 
 

 
function sum() { 
 
       var hrg = document.getElementById('harga').value; 
 
       var jml = document.getElementById('jumlah').value; 
 
       var result = parseInt(hrg) * parseInt(jml); 
 
       if (!isNaN(result)) { 
 
       document.getElementById('total').value = result; 
 
      } 
 
      } 
 

 
    var i = 1; 
 

 
    function additem() { 
 

 

 
    //menentukan target append 
 
    var itemlist = document.getElementById('itemlist'); 
 

 
    //    membuat element 
 
    var row = document.createElement('tr'); 
 
    var nama = document.createElement('td'); 
 
    var kode = document.createElement('td'); 
 
    var harga = document.createElement('td'); 
 
    var jumlah = document.createElement('td'); 
 
    var total = document.createElement('td'); 
 
    var aksi = document.createElement('td'); 
 

 

 
    //    meng append element 
 
    itemlist.appendChild(row); 
 
    row.appendChild(nama); 
 
    row.appendChild(kode); 
 
    row.appendChild(harga); 
 
    row.appendChild(jumlah); 
 
    row.appendChild(total); 
 
    row.appendChild(aksi); 
 

 
    //    membuat element input1 
 
    var nama_input = document.createElement('input'); 
 
    /*nama_input.setAttribute('id', 'nama');*/ 
 
    nama_input.setAttribute('name', 'nama_input[]'); 
 
    nama_input.setAttribute('class', 'form-control'); 
 

 
    var kode_input = document.createElement('input'); 
 
    /* kode_input.setAttribute('id', 'kode1');*/ 
 
    kode_input.setAttribute('name', 'kode_input[]'); 
 
    kode_input.setAttribute('readonly', ''); 
 
    kode_input.setAttribute('class', 'form-control'); 
 

 
    var harga_input = document.createElement('input'); 
 
    harga_input.setAttribute('name', 'harga_input[]'); 
 
    harga_input.setAttribute('class', 'form-control'); 
 
    //harga_input.setAttribute('onkeyup', 'sum();'); 
 
    
 

 
    var jumlah_input = document.createElement('input'); 
 
    jumlah_input.setAttribute('name', 'jumlah_input[]'); 
 
    jumlah_input.setAttribute('class', 'form-control'); 
 
    //jumlah_input.setAttribute('onkeyup', 'sum();'); 
 
    
 

 
    var total_input = document.createElement('input'); 
 
    total_input.setAttribute('name', 'total_input[]'); 
 
    total_input.setAttribute('class', 'form-control'); 
 

 
    var hapus = document.createElement('span'); 
 

 
    //    meng append element input 
 
    nama.appendChild(nama_input); 
 
    kode.appendChild(kode_input); 
 
    harga.appendChild(harga_input); 
 
    jumlah.appendChild(jumlah_input); 
 
    total.appendChild(total_input); 
 
    aksi.appendChild(hapus); 
 

 
    hapus.innerHTML = '<button class="btn btn-small btn-default"><b>Hapus</b></button>'; 
 
    //    membuat aksi delete element 
 
    hapus.onclick = function() { 
 
     row.parentNode.removeChild(row); 
 
    }; 
 

 

 
    var namaid = 'nama' + (Math.floor((1 + Math.random()) * 0x10000)); 
 
    var kodeid = 'kode' + (Math.floor((1 + Math.random()) * 0x10000)); 
 
    var hargaid = 'harga' + (Math.floor((1 + Math.random()) * 0x10000)); 
 
    var jumlahid = 'jumlah' + (Math.floor((1 + Math.random()) * 0x10000)); 
 
    var totalid = 'total' + (Math.floor((1 + Math.random()) * 0x10000)); 
 
    nama_input.setAttribute('id', namaid); 
 
    kode_input.setAttribute('id', kodeid); 
 
    harga_input.setAttribute('id', hargaid); 
 
    
 
    jumlah_input.setAttribute('id', jumlahid); 
 
    total_input.setAttribute('id', totalid); 
 
     
 
    // harga_input.setAttribute("onkeyup", "sum("+hargaid+","+jumlahid+","+totalid+")"); 
 
// jumlah_input.setAttribute("onkeyup", "sum("+hargaid+","+jumlahid+","+totalid+")"); 
 
    $(jumlah_input).on('keyup',function(){ 
 
    
 
     sum(hargaid,jumlahid,totalid) 
 
    }) 
 
    $(harga_input).on('keyup',function(){ 
 
    
 
     sum(hargaid,jumlahid,totalid) 
 
    }) 
 
    function sum(hargaid,jumlahid,totalid) { 
 
       var hrg = document.getElementById(hargaid).value; 
 
       var jml = document.getElementById(jumlahid).value; 
 
       var result = parseInt(hrg) * parseInt(jml); 
 
       if (!isNaN(result)) { 
 
       document.getElementById(totalid).value = result; 
 
      } 
 
      } 
 

 
    $("#" + namaid).autocomplete({ 
 
     source: "get_barang.php", 
 
     minLength: 2, 
 
     select: function(event, ui) { 
 
     $("#" + kodeid).val(ui.item.kode); 
 
     $("#" + hargaid).val(ui.item.harga); 
 
     } 
 
    }); 
 

 

 

 
    i++; 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<table class="table table-condensed" style="margin-left: 10px;"> 
 
     <thead> 
 
      <tr> 
 
      <th width="100px">Nama</th> 
 
      <th width="100px">Kode</th> 
 
      <th width="100px">Harga</th> 
 
      <th width="100px">Jumlah</th> 
 
      <th width="100px">Total</th> 
 
      <th width="80px"></th> 
 
      </tr> 
 
     </thead> 
 

 
     <tbody id='itemlist' > 
 
      <tr> 
 
      <td><input id='nama' name='nama_input[]' class='form-control' /></td> 
 
      <td><input id='kode' readonly name='kode_input[]' class='form-control' /></td> 
 
      <td><input id='harga' name='harga_input[]' class='form-control' onkeyup="sum();" /></td> 
 
      <td><input id='jumlah' autocomplete="off" name='jumlah_input[]' class='form-control' onkeyup="sum();" /></td> 
 
      <td><input id='total' name='total_input[]' class='form-control' value=" " /></td> 
 
      <td></td> 
 
      </tr> 
 
     </tbody> 
 

 
     <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td> 
 
      <button type="button" id="sample" class="btn btn-default"> 
 
       <b>Tambah</b> 
 
      </button> 
 
      </td> 
 
     </tr> 
 
     </table>

Answer 2

这里是样品，试试这个

$(function() { 
 
    $(document).on('click', '.btn-remove', function() { 
 
    // remove closest row on click of remove button 
 
    $(this).closest('tr').remove(); 
 
    }); 
 

 
    $(document).on('input', 'input.harga,input.jumlah', function() { 
 
    var hrg = $(this).closest("tr").find('input.harga').val(); 
 
    var jml = $(this).closest("tr").find('input.jumlah').val(); 
 
    var result = parseInt(hrg) * parseInt(jml); 
 
    if (!isNaN(result)) { 
 
     $(this).closest("tr").find('input.total').val(result); 
 
    } 
 
    }) 
 
}); 
 

 

 
function additem() { 
 

 
    var rowHtml = '<tr>' + 
 
    '<td><input name="nama_input[]" class="nama form-control" /></td>' + 
 
    '<td><input readonly name="kode_input[]" class="kode form-control" /></td>' + 
 
    '<td><input name="harga_input[]" class="harga form-control" /></td>' + 
 
    '<td><input autocomplete="off" name="jumlah_input[]" class="jumlah form-control" /></td>' + 
 
    '<td><input name="total_input[]" class="total form-control" /></td>' + 
 
    '<td><button class="btn btn-small btn-default btn-remove"><b>Hapus</b></button></td>' + 
 
    '</tr>'; 
 

 

 
    $('#itemlist').append(rowHtml); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-condensed" style="margin-left: 10px;"> 
 
    <thead> 
 
    <tr> 
 
     <th width="100px">Nama</th> 
 
     <th width="100px">Kode</th> 
 
     <th width="100px">Harga</th> 
 
     <th width="100px">Jumlah</th> 
 
     <th width="100px">Total</th> 
 
     <th width="80px"></th> 
 
    </tr> 
 
    </thead> 
 

 
    <tbody id='itemlist'> 
 
    <tr> 
 
     <td> 
 
     <input name="nama_input[]" class="nama form-control" /> 
 
     </td> 
 
     <td> 
 
     <input readonly name="kode_input[]" class="kode form-control" /> 
 
     </td> 
 
     <td> 
 
     <input name="harga_input[]" class="harga form-control" /> 
 
     </td> 
 
     <td> 
 
     <input autocomplete="off" name="jumlah_input[]" class="jumlah form-control" /> 
 
     </td> 
 
     <td> 
 
     <input name="total_input[]" class="total form-control" /> 
 
     </td> 
 
     <td></td> 
 
    </tr> 
 
    </tbody> 
 

 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td> 
 
     <button type="button" class="btn btn-default" onclick="additem(); 
 
          return false"> 
 
     <b>Tambah</b> 
 
     </button> 
 
    </td> 
 
    </tr> 
 
</table>

我希望这将有助于