what is error in this js code

Question

  var RowNumber = row.rowIndex;
  alert(RowNumber);
  var a = document.createElement('a');
  a.textContent = 'Remove';
  a.style.cursor = 'pointer';
  //a.href = "javascript: document.getElementById(tblId).deleteRow(0);"; 
  a.setAttribute("onclick","alert(RowNumber)");
  cell1.appendChild(a);

firebug say 'RowNumber is not defined' but i have defined RowNumber above. Also alrting the RowNumber variable.

And my complete function is =

function addRowToTable(tblId,icOptionArray,leavRowFromBottom,selectedValue,selectedQuantity)
{

  var tbl = document.getElementById(tblId);
  var lastRow = tbl.rows.length - (leavRowFromBottom + 0);
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
//  var iteration = lastRow + 1;
  var row = tbl.insertRow(lastRow);

  //  cell 0
  var cell0 = row.insertCell(0);
  cell0.align='right';

  var el = document.createElement('label');
  el.textContent = 'IC Chips :';
  cell0.appendChild(el);

  //cell 1
  var cell1 = row.insertCell(1);


  var selector = document.createElement('select');
  selector.id = 'icchips';
  selector.name = 'icchips[]';
  selector.style.width = '200px';
  //alert(selector);

  for (var key in icOptionArray) 
  {   
      if(key == 'containsValue') continue;
      var option = document.createElement('option');
      if(key == selectedValue)
         option.selected = true;
      option.value = key;
      option.appendChild(document.createTextNode(icOptionArray[key]));
      selector.appendChild(option);
  }

  cell1.appendChild(selector);

  var space = document.createTextNode(' ');
     cell1.appendChild(space);  

  var lbl = document.createElement('label');
  lbl.textContent = 'Qty :';
  cell1.appendChild(lbl);  


  var selector = document.createElement('select');
  selector.id = 'additional_quantity';
  selector.name = 'additional_quantity[]';

  for (var key in QUANTITIES_ARR) 
  {   
      if(key == 'containsValue') continue;
      var option = document.createElement('option');
      if(key == selectedQuantity)
         option.selected = true;
      option.value = key;
      option.appendChild(document.createTextNode(QUANTITIES_ARR[key]));
      selector.appendChild(option);
  }

  cell1.appendChild(selector);  
  var space = document.createTextNode(' ');
  cell1.appendChild(space);

  var RowNumber = row.rowIndex;
  alert(RowNumber);
  var a = document.createElement('a');
  a.textContent = 'Remove';
  a.style.cursor = 'pointer';
  //a.href = "javascript: document.getElementById(tblId).deleteRow(0);"; 
  a.setAttribute("onclick","alert(RowNumber)");
  cell1.appendChild(a);

}

Answer 1

这样做

a.onclick = function(){ alert(RowNumber); };

Answer 2

The problem is that the local scope where RowNumber is defined is not the same as the scope wherein your onclick handler is called. The solution proposed by @jancha fixes that. His use of a closure ensures the RowNumber in the handler is the same as the one in the local scope.

Answer 3

RowNumber is not defined in the scope of the created element, since your using jQuery you could use:

var RowNumber = row.rowIndex;
alert(RowNumber);
var a = document.createElement('a');
a.textContent = 'Remove';
a.style.cursor = 'pointer';
//a.href = "javascript: document.getElementById(tblId).deleteRow(0);"; 
$(a).click(function(e){
  alert(RowNumber);
});