jQuery单击gridview行上的选择按钮

Posted 2023-05-08

【中文标题】jQuery单击gridview行上的选择按钮

【英文标题】：jQuery to click select button on a gridview row

【发布时间】：2018-11-27 17:39:33

【问题描述】：

我有一个带有自动生成选择按钮的简单网格视图：

<asp:Gridview runat="server" id="gvChemDates" CssClass="c_gvv" 
    onselectedindexchanged="getValues" AutoGenerateSelectButton="True" />

我想隐藏选择列并允许我的用户通过单击行上的任意位置来选择它。使用 jQuery，我尝试了几种变体：

$('#gvChemDates tr').click(function () 
    $(this).closest('input[type=submit]').trigger('click');
)

但我似乎没有点击自动生成的选择按钮。有人能告诉我正确的语法吗？谢谢。

【问题讨论】：

.closest() 搜索当前节点级别并向上遍历，(api.jquery.com/closest)，我想你是想使用 .find() 而不是 .closest()

我假设“自动生成”是动态的？试试$('#gvChemDates').on('click', ' tr', function () ...);

aspsnippets.com/Articles/…

如果您想更简单地执行此操作，请查看我的答案

【参考方案1】：

$('#gvChemDates tr') 将不起作用（#gvChemDates 不存在）因为 ASP.NET 在使用 runat="server" 时会生成随机 id

使用ClientIDMode="Static" 确保客户端 ID 与服务器 ID 匹配：

<asp:Gridview runat="server" ClientIDMode="Static" id="gvChemDates" CssClass="c_gvv" 
    onselectedindexchanged="getValues" AutoGenerateSelectButton="True" />

注意：当您使用runat="server" ASP.NET 时，会为客户端 id 生成随机 id。所以我们使用ClientIDMode="Static" 来让client id 匹配server id。

【参考方案2】：

带有 GridView 选择按钮的 Jquery 函数

<asp:TemplateField>
     <ItemTemplate>
            <asp:Button ID="moreDetail" runat="server" CommandName="select" Text="More Detail" onclientclick="pageLoad()" />
     </ItemTemplate>
</asp:TemplateField>

jQuery 函数

function pageLoad() 
    var gvid = '<%=GridDetail.ClientID %>';
    $('#' + gvid + ' input[type=button]').removeAttr('onclick');
    $('#' + gvid + ' input[type=button]').click(function () 

        //$('#' + gvid + ' tr').css('background-color', '#FFFFFF');
        var row = $(this).parent().parent();
        //row.css('background-color', '#669999');
        var cells = row.find('td'); // busca el valor de cada columna en el record releccionado.

        var premAmount = row.find('td').eq(7).html();
        var commAmount = row.find('td').eq(8).html();
        var account = row.find('td').eq(9).find(':input').val();
        var loan = row.find('td').eq(10).find(':input').val();
        var tranType = row.find('td').eq(11).find(':input').val();
        var semsys = row.find('td').eq(12).find(':input').val();
        var prodName = row.find('td').eq(13).find(':input').val();
        var contact = row.find('td').eq(15).find(':input').val();

        var commPercent = (parseFloat(commAmount.replace(/[$,]+/g, "")) / parseFloat(premAmount.replace(/[$,]+/g, ""))) * 100;

        $('#Span1').html(cells[0].innerHTML); // 1 
        $('#Span2').html(cells[1].innerHTML); // 2 certificate
        $('#Span3').html(tranType);
        $('#Span4').html(cells[2].innerHTML); // 4 insured
        $('#Span5').html(cells[4].innerHTML); // 5 eff date
        $('#Span6').html(cells[5].innerHTML); // 6 exp date
        $('#Span7').html(cells[6].innerHTML); // 7 cancel date
        $('#Span8').html(cells[3].innerHTML); // 8  type
        $('#Span9').html(loan);
        $('#Span10').html(account); // ******
        $('#Span11').html(premAmount);
        $('#Span12').html(commAmount);
        $('#Span13').html(prodName); // *****
        $('#Span14').html(semsys); // *******
        $('#Span15').html(commPercent); //****
        $('#Span16').html(contact); // ******

        $('div#Div_Details').slideToggle("slow"); //animation
        $('div#Div_Details').slideDown("slow");


    );   
;