Question

我在javascript中添加了一个新表格行：

var i=1;
function addRow(seq, nominalcode, description, quantity, unitprice) {
    seq = seq || '';
    nominalcode = nominalcode || '';
    description = description || '';
    quantity = quantity || '';
    unitprice = unitprice || '';

    var tbl = document.getElementById('table1');
    var lastRow = tbl.rows.length - 4;
    //var iteration = lastRow - 1;
    var row = tbl.insertRow(lastRow);

    row.id = 'item_row_' + i;

    var Cell0 = row.insertCell(0);
    var elItemSequence = document.createElement('input');
    elItemSequence.type = 'hidden';
    elItemSequence.name = 'item_sequence' + i;
    elItemSequence.id = 'item_sequence' + i;
    elItemSequence.value = seq;
    Cell0.appendChild(elItemSequence);

    var elNominalcode = document.createElement('input');
    elNominalcode.type = 'textarea';
    elNominalcode.className = 'form-control';
    elNominalcode.name = 'nominal_code' + i;
    elNominalcode.id = 'nominal_code' + i;
    elNominalcode.placeholder = 'Nominal Code';
    elNominalcode.value = nominalcode;
    Cell0.appendChild(elNominalcode);

    var Cell1 = row.insertCell(1);
    var elDescription = document.createElement('textarea');
    elDescription.type = 'textarea';
    elDescription.className = 'form-control';
    elDescription.name = 'description' + i;
    elDescription.id = 'description' + i;
    elDescription.placeholder = 'Description';
    elDescription.value = description;
    elDescription.cols = 40;
    elDescription.rows = 2;
    Cell1.appendChild(elDescription);

    var Cell2 = row.insertCell(2);
    var elQuantity = document.createElement('input');
    elQuantity.type = 'text';
    elQuantity.className = 'form-control';
    elQuantity.name = 'quantity' + i;
    elQuantity.id = 'quantity' + i;
    elQuantity.placeholder = 'Quantity';
    elQuantity.value = quantity;
    elQuantity.value = quantity;
    Cell2 .appendChild(elQuantity);

    var Cell3 = row.insertCell(3);
    var elUnitPrice = document.createElement('input');
    elUnitPrice.type = 'text';
    elUnitPrice.className = 'form-control';
    elUnitPrice.name = 'unitprice' + i;
    elUnitPrice.id = 'unitprice' + i;
    elUnitPrice.placeholder = 'Price';
    elUnitPrice.value = unitprice;
    Cell3.appendChild(elUnitPrice);

    var Cell4 = row.insertCell(4);
    var elDelete = document.createElement('a');
    elDelete.href = '#';
    elDelete.onclick = function(){ DeleteInvoiceLine(seq, i) };
    elDelete.text = 'Delete' + i;
    Cell4.appendChild(elDelete);

    i++;
    document.getElementById('numrows').value = (i-1);
    //alert(i);
}

在上面的代码中有一个onClick动作调用函数

但每次添加行时都会运行该函数，如何才能使它仅在点击a锚点

时调用该函数

我的职责是：

function DeleteInvoiceLine(seq, row_num) {
    alert(seq + '/' + row_num);
}

Answer 1

您可以尝试匿名功能

elDelete.onclick = function(){ DeleteInvoiceLine(seq) };

Answer 2

您的代码中存在多个问题 1. elDelete.onclick=...而非onClick
2.当您注意到元素创建时DeleteInvoiceLine(seq)运行这是因为您将功能的结果，而不是功能分配给onclick事件。
3.（尚未询问）什么是sec变量？我怀疑像for(var sec=0;sec<N;sec++)这样的东西，你的代码在循环中。这不起作用（见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures） 4. elDelete.onclick = function(){ DeleteInvoiceLine(seq) };不起作用，因为sec在点击时超出了范围一些修复。

var i = 0;
//...
for(var sec=0;sec<N;sec++){
//your code
elDelete.onclick = DeleteInvoiceLine(seq, i);//I keep it with purpose
//your code
}
//...
i++;
//The key moment
function DeleteInvoiceLine(seq, row_num){
   //sec comes here from the loop
   return function(){//note (); (sec) would kill all construction
                     //and in this context would be **event {type:'click'}
      $.ajax(
        //your code which uses **sec** and/or **row_num**
        //this time sec and row_num are available from parent scope
      );//$.ajax
   }//return function
}//function DeleteInvoiceLine

Answer 3

试试这个：

...
elDelete.setAttribute("onclick", "DeleteInvoiceLine("+ seq +","+ i +")");
....

Javascript使用text和onClick将行添加到HTML表

3 个答案: