如何在用戶在文本框中輸入文本時使用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');