jQuery第三章课后题参考答案

阿帆fan 2021-06-25

1227

本答案仅供参考，如有错误概不负责

五、编程题

1、

如果想理解第27行的变量，请阅读第二篇内容（对象数据类型）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
<input type="button" value="获取数据" id="btn"/>
<table border="1" cellspacing="0">
    <thead>
    <tr>
        <th style="width:120px">书名</th>
        <th style="width:80px">页数</th>
        <th style="width:80px">售价</th>
    </tr>
    </thead>
    <tbody id="j_tbData">
        <tr>
            <td>jQuery</td>
            <td>250</td>
            <td>52</td>
        </tr>
    </tbody>
</table>
<script>
    var data = [{
        name: "JavaScript",
        pages: "320",
        price: "64"
    }, {
        name: "HTML和CSS",
        pages: "120",
        price: "48"
    }];


        $("#btn").click(function () {
            var str = $("tbody").html();
            for (var i = 0; i < data.length; i++) {
                str += "<tr>"+"<td>" + data[i].name + "</td>"+"<td>" + data[i].pages + "</td>"+"<td>" + data[i].price + "</td>"+"</tr>";
            }
            $("tbody").html(str);
        });
</script>
</body>


</html>

2、

解题思路：

点击全选按钮时，让下面所有的checked属性值与全选按钮一致
如果div里input的属性值为checked的数量和div里所有input数量一致，就让全选按钮选中，反之则不选中；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5-2</title>
</head>
<body>
    <form>
        <input type="checkbox" name="" id="all">All<hr>
        <div>
            <input type="checkbox">1<br>
            <input type="checkbox">2<br>
            <input type="checkbox">3<br>
            <input type="checkbox">4
        </div>
    </form>
    <script src="../jquery-1.12.4.js"></script>
    <script>
        $('#all').click(function(){
            $('div>input').prop('checked', $('#all').prop('checked') );
        });
        $('div>input').click(function(){
            var tmp = $('div>input:checked').length == $('div>input').length ;
            $('#all').prop('checked', tmp);
        });
</script>
</body>
</html>

有任何问题请点这里留言

点这里进入阿帆的论坛

jQuery第三章课后题参考答案

评论