Jquery RadioButtonList在gridview中-服务器端代码太慢，我可以在客户端执行吗？

我在网格视图中有一个单选按钮列表，如下所示：

<asp:GridView ID="gvLineItems" runat="server">
<asp:TemplateField>
      <asp:RadioButtonList ToolTip="Please provide an answer to the method." AutoPostBack="true" RepeatDirection="Horizontal" ID="rbAnswer" runat="server" SelectedValue='<%# DataBinder.Eval(Container, "DataItem.AnswerID")%>' OnSelectedIndexChanged="rbAnswer_SelectedIndexChanged">
                                    <asp:ListItem Text="Yes" Value="Yes" style="color:green;"></asp:ListItem>
                                    <asp:ListItem Text="No" Value="No" style="color:red;"></asp:ListItem>
                                    <asp:ListItem Text="N/A" Value="N/A" style="color:gray;"></asp:ListItem>
                                    <asp:ListItem Value="" Text="" style="display: none" />
                                </asp:RadioButtonList>
</asp:TemplateField>
</asp:GridView>

基本上，如果选择一个答案，它会更改gridview中单元格的颜色，并隐藏或取消隐藏面板。作为后端代码这样做会在应用程序中造成很大的延迟。我可以在jquery中这样做吗？如果是，我如何访问radiobuttonlist、答案、面板，以及如何更改jquery中第一个单元格（

gr.cells[0].backcolor

）的颜色

---

如果我在客户端完成这一切，可能会提高最终用户的可用性，他们现在抱怨速度太慢。

你可以试试这个。将单击事件附加到单选按钮上。我无法测试这个函数，但它可能会帮助您。使用jquery文件版本1.7或更高版本

在标记文件中：在

GridView

like中提供

RowStyle CssClass

属性

<asp:GridView ID="gvLineItems" runat="server" RowStyle-CssClass="row">

---

每当用户单击单选按钮时进行回发都会让用户感到沮丧

您可以在jQuery中执行类似的操作

$("#tableName").click(function (e) {
if(e.target.nodeName == "INPUT") {
    var radio = $(e.target);
    // Change to whatever element you want to change color
    var chgColor = radio.parent().find(":eq(0)");
    var pnlAnswer = $("#tableName #pnlAnswer");

    switch(radio.val()) {
        case "NO":
            tr.css("background-color": "#FF0000");
            pnlAnswer.show();
            break;
        case "YES":
            tr.css("background-color": "#00FF00");
            pnlAnswer.hide();
            break;  
        // ...
    }
}

}))

---

您需要检查页面生成的html代码，然后找出如何使用jQuery对其进行操作。

Nice到目前为止，我遇到的问题是parents（）返回多个tr。例如，radiobuttonlist渲染为tr和td，因此它为第一个单选按钮的背景着色。我只需要给网格视图的第一列上色…@oJM86o请检查更新。在

GridView

like中提供

RowStyle CssClass

属性，并访问父行like

var parentRow=$this.parents（'tr.row'）
$(function(){

     var gvLineItemsRadioObjs = $('[id$=gvLineItems] input[type=radio]');
     gvLineItemsRadioObjs.on('click', function(){

         var $this = $(this);

         //var parentRow =  $this.parents('tr'); // find the parent row.
         var parentRow =  $this.parents('tr.row'); // find the parent row.

         var firstCell = parentRow.find('td:eq(0)'); //find the first cell

         var p =parentRow .find('[id$=pnlAnswer]'); // find the panel

         switch($this.val()) //check the value
         {
            case 'No':
               firstCell.css('background-color', 'red');
               p.show();
               break;
            case 'Yes':
               firstCell.css('background-color', 'green');
               p.hide();
               break;
            case 'N/A':
               firstCell.css('background-color', '');
               p.hide();
               break;
            default:
               firstCell.css('background-color', 'red');
               p.show();
               break;
         }   

    });
});

$("#tableName").click(function (e) {
if(e.target.nodeName == "INPUT") {
    var radio = $(e.target);
    // Change to whatever element you want to change color
    var chgColor = radio.parent().find(":eq(0)");
    var pnlAnswer = $("#tableName #pnlAnswer");

    switch(radio.val()) {
        case "NO":
            tr.css("background-color": "#FF0000");
            pnlAnswer.show();
            break;
        case "YES":
            tr.css("background-color": "#00FF00");
            pnlAnswer.hide();
            break;  
        // ...
    }
}