选中复选框上的td颜色

时间:2013-04-29 07:36:24

标签: javascript jquery asp.net

我有一张桌子,我希望更改颜色或<td>内的复选框<td>

<table>
 <% for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                   {
                %>
                <tr>
                    <td>
                        <b>
                            <%Response.Write(Convert.ToDateTime(ds.Tables[0].Rows[i]["StartTime"].ToString()).ToString("hh:mm")); %>
                            -
                            <%Response.Write(Convert.ToDateTime(ds.Tables[0].Rows[i]["EndTime"].ToString()).ToString("hh:mm")); %></b>
                    </td>
                    <td>
                        <asp:CheckBox ID="chk" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox2" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox3" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox4" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox5" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="CheckBox6" runat="server" />
                    </td>
                </tr>
                <%
                    } %>
            </table>

4 个答案:

答案 0 :(得分:3)

JS小提琴:http://jsfiddle.net/satpalsingh/KPXrU/

HTML:

<table>
    <tr>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
        <td><input type="checkbox" /></td>
    </tr>   
 </table>

JS:

$(function(){
    $( "input[type=checkbox]" ).on("change", function(){
        if($(this).is(':checked'))
            $(this).parent().css('background-color', '#cd0000');
        else
            $(this).parent().css('background-color', '');
    });
});

答案 1 :(得分:0)

您可以在jquery中获取所有标记。 请参阅以下两个链接

从这些链接中,了解如何在jquery中获取所有标签,然后你可以使用它...可能是第二个链接可以给你更多的想法

Get all the td tags of table which in div tag using JQUERY

Cannot set the background color of "TD" using JQuery

答案 2 :(得分:0)

这样的东西?

$('[id^="CheckBox"]').on('change',function(){
   if($(this).is(':checked')){
      $(this).parent().css('background','red');
   }else{
      $(this).parent().css('background','');
   }
});

答案 3 :(得分:0)

你走了。 SHould也适用于所有IE:

(function($){

    $(function() {
        var _ie = /msie\s[6789]/gi.test(window.navigator.userAgent),
            _event = _ie ? 'propertychange' : 'change';

        $('td').each(function() {
            var el = $(this),
                input = el.find('input');

            input.bind(_event, function() {
                el.css('color', '#yourcolor');
            });
        });
    });
})(jQuery);