Get Selected row of dynamically created table on click of a button

Question

I want to get the selected row of the table on click event of a button. The table is dynamically created, i have seen many sample code for this and tried but not any for dynamic created table.

Here is my code:

$('#custorder1').on('click', 'tr', function()   
{
    $(this).addClass('selected').siblings().removeClass('selected'); 
    });
    $('.OK').on('click', function(e)
{
        alert($("#custorder1 tr.selected td:first").html());        

 };

// Below is the skeleton of table

<table class="CSSTableGenerator" id="custorder1" >
               <thead>
                    <tr id="head1">
                        <th>
                            Item No
                        </th>
                        <th>
                            Name
                        </th>
                        <th>
                            Alias
                        </th>
                        <th>
                            Brand
                        </th>
                     </tr>
                   </thead>
                   <tbody>
                   </tbody>
                </table>
            <input type="button" name="OK" class="OK" value="OK"/>

// The basic problem is : function is not called neither on click of tr element nor on click of ok button.

Help Please...

//This is the code for dynamically creation of table

function setItemForSale(itemForSale, type,xml)
{

        var itemForSaleTable = document.getElementById("custorder1");
        var itemForSaleTableHead = document.getElementById("head1");
        var itemForSaleTableBody = document.createElement("tbody");

        itemForSaleTableBody.appendChild(itemForSaleTableHead);

        for(var i=0; i< itemForSale.length; i++)
        {
            var row = document.createElement("tr");

                var obj             = itemForSale[i];
                var vitemno         = obj["itemNo"];
                var vname           = obj["name"];
                var valias          = obj["alias"];
                var vbrand          = obj["brand"];

                var cell       = document.createElement("td");
                var cellText   = document.createTextNode(vitemno);
                cell.appendChild(cellText);
                row.appendChild(cell);

                cell       = document.createElement("td");              
                cellText   = document.createTextNode(vname);
                cell.appendChild(cellText);
                row.appendChild(cell);

                cell       = document.createElement("td");              
                cellText   = document.createTextNode(valias);
                cell.appendChild(cellText);
                row.appendChild(cell);

                cell       = document.createElement("td");              
                cellText   = document.createTextNode(vbrand);
                cell.appendChild(cellText);
                row.appendChild(cell);

                itemForSaleTableBody.appendChild(row);
}
itemForSaleTable.appendChild(itemForSaleTableBody);
itemForSaleTable.setAttribute("border", "2");       
}

// here is the Css

.selected {
    color: brown;
    background-color: #33afff;
}

Answer 1

function may not be called if you are not placing it inside document.ready() method

$( document ).ready( function(){

    $( document ).on('click', '#custorder1 tr', function()   
    {
       $(this).addClass('selected').siblings().removeClass('selected'); 
    });
    $('.OK').on('click', function(e)
    {
        alert($("#custorder1 tr.selected td:first").html());        
    };
} );

Answer 2

Try using this

    var initiate = function(){
        if($('#custorder1') && $('.OK')){
            $('#custorder1 tr').not('#head1').on('click', function(){
                $(this).addClass('selected').siblings().removeClass('selected'); 
            });
            $('.OK').on('click', function(e){
                if($('#custorder1 tr.selected').not('#head1')!=null && ($('#custorder1 tr.selected').not('#head1').length == 0))
                    $($("#custorder1 tr").not('#head1')[0]).addClass('selected');
                alert($("#custorder1 tr.selected td:first").html());
            });
        }
    };

I have removed the code part which was using interval.
Lets come back to your table generating function. In your function

call the initiate function

function setItemForSale(itemForSale, type,xml)
{
    ....
    ....
    itemForSaleTable.setAttribute("border", "2");  
    initiate();
}

Answer 3

I think now i can answer my own question. With this code u can select any row in dynamically created table and after select click on button to add that row to another table dynamic created table.

Here is the code for appending table:

var firstAmount=0;
function Buy()
{
    for(var i=0;i< data.length;i++) 
    {
        var obj = data[i];

        var vitemNo         = obj["itemNo"];
        var vpkg            = obj["pkg"];
        firstAmount         = obj["regPrice"];

        if(zitemNo == vitemNo && z1Pkg == vpkg)
        {
 // main code for appending creating tr and td and assigning it to variable     
            var Markup = "<tr><td>"+0+"</td><td>"+vmobileNo+"</td><td>"+ vitemNo + "</td><td>"+vpkg+"</td><td>"+firstAmount+"</td><td contenteditable='true'>"+1+"</td></tr>";

       // below code appends it to table
            $("#table2ID tr:last").after(Markup);
        }       
    }
}

// function of creating dynamic table:

function setItemForSale(data, type,xml)
{   
        var itemForSaleTable = document.getElementById("table1ID");
        var itemForSaleTableHead = document.getElementById("head1");
        var itemForSaleTableBody = document.createElement("tbody");

        itemForSaleTableBody.appendChild(itemForSaleTableHead);

        $('#table1IDtr').has('td').remove();            // Code for clearing table body

        for(var i=0; i< data.length; i++)
        {
            var row = document.createElement("tr");
            row.ondblclick = function()
            {
                //tableRow()
                $(this).addClass('selected').siblings().removeClass('selected'); 
                zitemNo = $(this).find('td:first').text();    
                z1Pkg = $(this).find('td:nth-child(8)').text();
            };

                var obj             = data[i];
                var vitemno         = obj["itemNo"];
                var vname           = obj["name"];
                var valias          = obj["alias"];
                var vbrand          = obj["brand"];

                var cell       = document.createElement("td");
                var cellText   = document.createTextNode(vitemno);
                cell.appendChild(cellText);
                row.appendChild(cell);

                cell       = document.createElement("td");              
                cellText   = document.createTextNode(vname);
                cell.appendChild(cellText);
                row.appendChild(cell);

                cell       = document.createElement("td");              
                cellText   = document.createTextNode(valias);
                cell.appendChild(cellText);
                row.appendChild(cell);

                cell       = document.createElement("td");              
                cellText   = document.createTextNode(vbrand);
                cell.appendChild(cellText);
                row.appendChild(cell);

                itemForSaleTableBody.appendChild(row);
}
itemForSaleTable.appendChild(itemForSaleTableBody);
itemForSaleTable.setAttribute("border", "2");       
}