jq代码学习14--表格变色

来源:互联网 发布:java 获取某月第一天 编辑:程序博客网 时间:2024/04/25 13:19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title></title><link href="css/style.css" rel="stylesheet" type="text/css" /><!--   ����jQuery --><script src="../../scripts/jquery.js" type="text/javascript"></script><script type="text/javascript">  $(function(){        $("tbody>tr:odd").addClass("odd");        $("tbody>tr:even").addClass("even");        $('tbody>tr').click(function() {            //�жϵ�ǰ�Ƿ�ѡ��            var hasSelected=$(this).hasClass('selected');            //���ѡ�У����Ƴ�selected�࣬����ͼ���selected��            $(this)[hasSelected?"removeClass":"addClass"]('selected')                //�����ڲ���checkbox,���ö�Ӧ�����ԡ�                .find(':checkbox').attr('checked',!hasSelected);        });        // �����ѡ��Ĭ���������ѡ��ģ����ɫ.        $('tbody>tr:has(:checked)').addClass('selected');  })</script></head><body>    <table>        <thead>            <tr><th> </th><th>����</th><th>�Ա�</th><th>��ס��</th></tr>        </thead>        <tbody>            <tr><td><input type="checkbox" name="choice" value=""/></td>                <td>��ɽ</td><td>��</td><td>�㽭����</td></tr>            <tr><td><input type="checkbox" name="choice" value="" /></td>                <td>����</td><td>Ů</td><td>�㽭����</td></tr>            <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>                <td>����</td><td>��</td><td>���ϳ�ɳ</td></tr>            <tr><td><input type="checkbox" name="choice" value="" /></td>                <td>����</td><td>��</td><td>�㽭����</td></tr>            <tr><td><input type="checkbox" name="choice" value="" /></td>                <td>Rain</td><td>��</td><td>�㽭����</td></tr>            <tr><td><input type="checkbox" name="choice" value="" /></td>                <td>MAXMAN</td><td>Ů</td><td>�㽭����</td></tr>        </tbody>    </table></body></html>