Get row id of dynamic table in html

Question

Below function is for creating dynamic table with data and performing clicking operations. When user is clicked a row we need to get that particular row id. But am always getting only last row id. I tried so many ways. please simplify it:

function loader() {

    //alert("alert is here");
    //calling java function
        var jsonData = window.webConnector.load();
        //toaster.print(jsonData);
//parsing json data
        var data=JSON.parse(jsonData);
        //document.getElementById("test").innerHTML = data.pos[0].store_name;
    var totalBillAmount=0.0;
        var posid;
        var row=[];
//creating dynamic table
        for(var i=0;i<data.pos.length;i++){

         posid=data.pos[i].posid;        
        var radioHtml = '<input type="radio" name="' + posid + '" id="radio" />';


        var table = document.getElementById("mytbody");
         row[i] = table.insertRow(i);

        var cell1 = row[i].insertCell(0);
        var cell2 = row[i].insertCell(1);
        var cell3 = row[i].insertCell(2);
        var cell4 = row[i].insertCell(3);

        //cell1.innerHTML = radioHtml; 
        cell1.innerHTML = radioHtml+" "+data.pos[i].date_time; 
        cell2.innerHTML = data.pos[i].store_name;
        cell3.innerHTML = data.pos[i].billamount;
        cell4.innerHTML = posid;
        totalBillAmount=totalBillAmount+parseFloat(data.pos[i].billamount);
//performing operations when row is cliked
        row[i].onclick=function(){
        alert(posid);//it gives only last row posid
        //var rowIndex=this.parentNode.rowIndex;
        var rowIndex=$(this).parent().find(row);
        var row1=rowIndex.eq(i).text();
        radioHtml.setChecked=true;
        alert(this.parentElement.rowIndex);
        //var rowindex=$(this).closest(row).index(); 
   //above line  gives 1 and -1
        var rowindex=table.parentNode.rowIndex;
        alert(rowindex) //it gives undefined

        }
}

Answer 1

On-clicks are futures and you'll have to retain transient scope values by using the right closure setup (IIFE / bind etc.).

row[i].onclick = (function (index) { //capture more aguments as passed
    return function () {
        alert(index);
        //more code
    }
}(i)); //pass in more arguments as needed