《JavaScript前端开发案例教程》------第7章DOM课后练习

最新推荐文章于 2022-06-07 08:35:42 发布

Avavavavavavavava

最新推荐文章于 2022-06-07 08:35:42 发布

阅读量4.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：《JavaScript前端开发案例教程》黑马程序员文章标签： javascript

本文链接：https://blog.youkuaiyun.com/homoiotheymy/article/details/118733775

《JavaScript前端开发案例教程》黑马程序员专栏收录该内容

12 篇文章

订阅专栏

这篇博客介绍了如何使用HTML创建表格，包括样式设置和表格元素的布局。同时，通过JavaScript实现全选、全不选和反选表格中复选框的功能，展示了前端交互的基本实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、填空题

1.	document.createElement()
2.	<html>标签

二、判断题

1.	错。
2.	错。
3.	对。
4.	错。

三、选择题

1.	B
2.	B
3.	C

四、编程题

<style>
    table{width:80%; border:1px solid #69c; border-collapse: collapse; margin:10px auto;}
    table tr th,table tr td{border:1px solid #69c; height:30px; font-size: 12px; 
text-align: center;}
</style>
<table>
    <tr><th>操作</th><th>编号</th><th>图书名称</th><th>价格</th></tr>
    <tr>
        <td><input type="checkbox" name="books"></td>
        <td>1</td><td>测试1</td><td>39.90</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="books"></td>
        <td>2</td><td>测试2</td><td>78.90</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="books"></td>
        <td>3</td><td>测试3</td><td>30.90</td>
    </tr>
    <tr><td colspan="4">
            <input id="checkAll" type="button" value="全选">
            <input id="checkNone" type="button" value="全不选">
            <input id="checkInvert" type="button" value="反选">
        </td><tr>
</table>
<script>
    (function(){
       // 分别获取全选按钮、全不选按钮、反选按钮
       var checkAll = document.getElementById('checkAll');
       var checkNone = document.getElementById('checkNone');
       var checkInvert = document.getElementById('checkInvert');
       // 获取所有复选框
       var checkboxes = document.getElementsByName('books');
       checkAll.onclick = function(){// 全选
           for(var i in checkboxes){
               checkboxes[i].checked = true;
           }
       };
       checkNone.onclick = function(){// 全不选
           for(var i in checkboxes){
               checkboxes[i].checked = false;
           }
       };
       checkInvert.onclick = function(){// 反选
           for(var i in checkboxes){
               checkboxes[i].checked  = checkboxes[i].checked ? false : true;
           }
       };
    })();
</script>