Получить выбранную строку динамически созданной таблицы одним нажатием кнопки

Question

Я хочу получить выбранную строку таблицы в событии клика кнопки. Таблица динамически создана, я видел много примеров кода для этого и пытался, но не для динамически созданной таблицы.

Вот мой код:

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

}; 

// Ниже скелет таблицы

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

// Основная проблема заключается в: функция не не вызывается ни на щелчок т.р. элемента, ни на нажмите кнопку ok.

Помощь Пожалуйста ...

// Это код динамически создание таблицы

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

// здесь является Css

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

Answer 1

Я думаю, что теперь я могу ответить на мой собственный вопрос. С помощью этого кода вы можете выбрать любую строку в динамически созданной таблице и после выбора нажать кнопку, чтобы добавить эту строку в другую таблицу динамически созданной таблицы.

Вот код для добавления таблицы:

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

Answer 2

функция может быть вызвана, если вы не размещаете его внутри document.ready() метод

$(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 3

Попробуйте использовать этот

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

Я удалил часть кода, который используя интервал.
Давайте вернемся к вашей функции генерации таблицы. В функции

вызова посвященной функции

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