如何在用户在文本框中输入文本时使用JavaScript更改一行的背景颜色

Question

我想要一个ontextchanged函数，所以基本上当用户在txtpart中输入内容时，我希望能够检查gridview并查看该部分是否存在于gridview中。如果是这样我想要将该行的背景颜色更改为绿色..

我该如何使用javascript来做到这一点？

<asp:GridView ID="gvOrderItems" runat="server" GridLines="None" Visible="true" CssClass="reportGrid" 
    AlternatingRowStyle-CssClass="alt" HeaderStyle-CssClass="hdr" RowStyle-CssClass="row" 
    AllowPaging="false" ShowFooter="false" AutoGenerateColumns="False" BorderStyle="Solid" BorderWidth="1px"> 
    <Columns> 
     <asp:BoundField DataField="part_nbr" HeaderText="Part #" ItemStyle-Width="200px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" /> 
     <asp:BoundField DataField="qty_requested" HeaderText="Qty" HeaderStyle-HorizontalAlign="Center" 
      ItemStyle-HorizontalAlign="Center" /> 
    </Columns> 
    <RowStyle HorizontalAlign="Left" /> 
</asp:GridView>    

<br /><br /><br /> 

<asp:TextBox ID="txtpart" runat="server" Width="125px" Visible="true" ></asp:TextBox> 

隐藏文件的代码（的.cs）：

protected void Page_Load(object sender, EventArgs e) 
{ 
    DataTable dt = new DataTable(); 
    dt.Columns.Add("part_nbr"); 
    dt.Columns.Add("qty_requested"); 

    var dr = dt.NewRow(); 
    dr["part_nbr"] = "part1"; 
    dr["qty_requested"] = "1"; 
    dt.Rows.Add(dr); 

    var dr2 = dt.NewRow(); 
    dr2["part_nbr"] = "part2"; 
    dr2["qty_requested"] = "1"; 
    dt.Rows.Add(dr2); 

    var dr3 = dt.NewRow(); 
    dr3["part_nbr"] = "part3"; 
    dr3["qty_requested"] = "1"; 
    dt.Rows.Add(dr3); 

    gvOrderItems.DataSource = dt; 
    gvOrderItems.DataBind(); 
} 

Answer 1

如何：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#<%= gvOrderItems.ClientID %> input[type="text"]').keydown(function() { 
      $(this).closest('tr').children('td, th').css('background-color', '#ff0000'); 
     }); 
    }); 
</script> 

这将​​功能绑定到GridView的每一个文本框，并会改变背景每个TD和TH的颜色为红色。

您也可以将背景颜色直接设置为TR，但一些较旧的浏览器无法处理该（IE）。

$(this).closest('tr').css('background-color', '#ff0000');