Question

$(document).ready(function(){ 
     var srno=1; 
     var srnoarray= new Array(); 
     $(".addRow").click(function(){ 

      var ToAppend='<tr><td><input type="text" class="form-control" style="width:40px;" name="srno_[]" id="id_srno_'+srno+'" value="'+srno+'" readonly="readonly" /></td>'; 

      ToAppend+='<td>'; 
      ToAppend+='<select class="form-control" name="product_name_'+srno+'" id="product_name_'+srno+'" onchange="return onSelectChangeajax(this.value,'+srno+')">'; 
      ToAppend+='<option value="0">Select Product</option>'; 
      ToAppend+='</select>'; 
      ToAppend+='</td>'; 

      ToAppend+='<td><input type="text" class="form-control" name="product_prise_'+srno+'" id="product_prise_'+srno+'" placeholder="Purchase Prise" onblur="calAmount('+srno+')" /></td><td><input type="text" class="form-control" name="product_qty_'+srno+'" id="product_qty_'+srno+'" value="1" placeholder="Quantity" onblur="calAmount('+srno+')"/></td><td><input type="text" class="form-control" name="product_amt_'+srno+'" id="product_amt_'+srno+'" placeholder="Amount" onblur="calAmount('+srno+')"/></td><td><img src="dist/img/removerow.png" onclick="deleteRow(this),deleteArrayVal.apply(this,'+srnoarray+');" /></td></tr>'; 
      srnoarray.push(srno); 
      $("#purchaseItems").append(ToAppend); 

      console.log(srnoarray); 
      srno++; 
     }); 

}); 

function deleteRow(rwo) 
{ 
    var i=rwo.parentNode.parentNode.rowIndex; 
    document.getElementById("purchaseItems").deleteRow(i); 
} 
function deleteArrayVal(val) 
{ 
    console.log(val); 

} 

Выше функции добавляют динамическую строку и удаляют строку в таблице. Я создал массив с именем srnoarray, и я добавил srno в том массиве на каждый tr, добавляемый динамически. deleteRow - это функция удаления tr, , но когда я удаляю tr, я хочу удалить конкретный srno из srnoarray.

<img src="dist/img/removerow.png" onclick="deleteRow(this),deleteArrayVal('+srnoarray+');" /> 

Я попытался прохождения массива в качестве аргумента в функции, но это не используется. как я должен это делать ??

Answer 1

Я вижу, что вы пытаетесь использовать метод здесь: document.getElementById ("purchaseItems"). DeleteRow (i);

Для этого вам может потребоваться добавить deleteRow в качестве прототипа для работы.

Но, пожалуйста, уточните, что именно вы хотите удалить из массива.

Спасибо.

Answer 2

function deleteArrayVal(value) { 
    var index = arr.indexOf(value); 
    if (index > -1) { 
     arr.splice(index, 1); 
    } 
} 

Answer 3

Прежде всего, я бы рекомендовал использовать шаблонизатор (например handlebars) держать JS уборщик (без HTML в JQuery). Улучшает читаемость.

Я также посмотрел бы на angularjs, потому что тогда вам будет проще синхронизировать данные js с вашим DOM.

Для кнопки удаления строки вы можете добавить атрибут данных в каждую строку, чтобы вы могли легко получить щелкнув строку в обработчике кликов.

Пожалуйста, взгляните на демо внизу и здесь, в jsFiddle.

var row = $("#row-template").html(), 
 
    rowTemplate = Handlebars.compile(row), 
 
    purchasedItems = []; 
 

 
/* 
 
var context = {srno: 0}; 
 
var html = rowTemplate(context); 
 
*/ 
 
function addRow() { 
 
    purchasedItems.push({ 
 
     srno: purchasedItems.length+1, 
 
     products: [ {// just some dummy products 
 
      name:'pizza', 
 
      selected: 'selected' 
 
     }, 
 
     {name:'pasta' 
 
     }, 
 
     {name:'hamburger'} 
 
     ] 
 
    }); 
 
    
 
    console.log(purchasedItems); 
 
    refreshTable(); 
 
} 
 

 
function refreshTable() { 
 
    $('#purchaseItems').empty(); 
 
    $.each(purchasedItems, function(index, item) { 
 
     $('#purchaseItems').append(rowTemplate(item)); 
 
    }); 
 
} 
 

 
function getRowId(context) { 
 
    return $(context).parent().parent().attr('data-rowId'); 
 
} 
 

 
/* not working --> needed to update the data in the array 
 
$('#purchaseItems').on('change', '.productSelection', function() { 
 
    var index = getRowId(this); 
 
    console.log(index); 
 
    
 
}); 
 
*/ 
 

 
$('#purchaseItems').on('click', '.removeRow', function() { 
 
    var index = getRowId(this); 
 
    console.log(index); 
 
    purchasedItems.pop(index); 
 
    console.log(purchasedItems); 
 
    refreshTable(); 
 
}); 
 

 
$('#add').click(function() { 
 
    addRow(); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script id="row-template" type="text/x-handlebars-template"> 
 
    <tr data-rowId="{{srno}}"> 
 
     <td> 
 
      <input type="text" class="form-control" style="width:40px;" name="srno_[]" id="id_srno_{{srno}}" value="{{srno}}" readonly="readonly" /></td> 
 
    <td> 
 
     <select class="form-control" name="product_name_{{srno}}" id="product_name_{{srno}}" class="productSelection"> 
 
      {{#each products}} 
 
      <option value="{{this.name}}" {{this.selected}}>{{this.name}}</option> 
 
      {{/each}} 
 
      
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="form-control" name="product_prise_{{srno}}" id="product_prise_{{srno}}" placeholder="Purchase Prise" onblur="calAmount({{srno}})" /> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="form-control" name="product_qty_{{srno}}" id="product_qty_{{srno}}" value="1" placeholder="Quantity" onblur="calAmount({{srno}})"/> 
 
    </td> 
 
    <td> 
 
     <input type="text" class="form-control" name="product_amt_{{srno}}" id="product_amt_{{srno}}" placeholder="Amount" onblur="calAmount({{srno}})"/> 
 
    </td> 
 
     <td> 
 
      <!--<img src="dist/img/removerow.png"--> <button class="removeRow">remove</button> 
 
     </td> 
 
    </tr> 
 
</script> 
 

 
<button id="add">add</button> 
 
<div id="purchaseItems"></div>