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的数组，我在每个tr动态添加的数组中添加了srno。 deleteRow是删除tr的功能，但是当我删除tr时我想从srnoarray中删除特定的srno。

<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更清洁（在jquery中没有HTML）。提高了可读性。

我也会看看angularjs，因为这样你就可以更容易地让你的js数据与你的DOM保持同步。

对于行删除按钮，您可以为每行添加数据属性，以便轻松获取点击处理程序中单击的行。

请查看下面的演示，并点击此处jsFiddle。

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

在javascript中将数组作为参数传递

3 个答案: