單擊按鈕獲取動態創建的表的選定行

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

//基本問題是：既不單擊tr元素也不單擊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

如果不將其放在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 2

試試這個

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

Answer 3

我想我現在可以回答我自己的問題。 使用此代碼，您可以選擇動態創建的表中的任何行，並在選擇后單擊按鈕以將該行添加到動態創建的表的另一表中。

這是追加表的代碼：

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