单击按钮

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