jquery 表格练习

<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        var list=[{'id':'1','国家':'中国','首都':'北京'},{'id':'2','国家':'美国','首都':'华盛顿'},{'id':'3','国家':'日本','首都':'东京'}]
        $(function () {
            var oldColor;
            $.each(list, function (index, content) {
                var tr = $('<tr></tr>').appendTo('tbody');
                tr.hover(function () {
                    oldColor = $(this).css('background-color');
                    $(this).css({ 'background-color': 'red', 'cursor': 'pointer' });
                }, function () {
                    $(this).css('background-color', oldColor);
                });
                $.each(content, function (key, value) {
                    $('<td>' + value + '</td>').appendTo(tr);
                });
            });


            $('tbody tr:even').css('background-color', 'yellow');
        });
    </script>
</head>
<body>
    <table border="1">
        <thead>
           <tr>
            <th>Id</th>
            <th>国家</th>
            <th>首都</th>
        </tr>
        </thead>
        
        <tbody>


        </tbody>
    </table>
</body>
</html>
posted @ 2018-05-12 08:41  dxm809  阅读(88)  评论(0编辑  收藏  举报