2.DOM练习一

最新推荐文章于 2022-09-01 02:23:41 发布

菜鸟小黑成长史

最新推荐文章于 2022-09-01 02:23:41 发布

阅读量159

点赞数

分类专栏： JavaScript练习文章标签： javascript css html5

本文链接：https://blog.csdn.net/cainiaoqifeiji/article/details/105848495

版权

这篇博客介绍了如何使用JavaScript实现DOM操作，包括鼠标浮动时元素高亮显示，实现全选和全不选功能，并能返回已选数组。同时，文章详细讲解了在全选后取消单个选择时全选按钮的状态变化，以及所有单选被选中后的全选按钮状态调整。示例代码包含在Mytable.html和Mytable.css文件中。

摘要由CSDN通过智能技术生成

要求：

鼠标浮动之后会高亮，方便识别
实现全选和全否，并且返回数组
单选是反应正常，全选后，当取消某个选择是，全选按钮消失；当单选全部被选择后，全选按钮变亮。

Mytable.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Mytable</title>
  <link rel="stylesheet" href="Mystyle.css"/>
 </head>
 <body>
  <div class="center">
  <table class='gridtable'>
   <thead>
    <tr>
     <th><input type="checkbox" id="allcheck"/></th>
     <th>元素名称</th>
     <th>功能</th>
    </tr>
   </thead>
   <tbody id='tb'>
    <tr>
     <td><input type="checkbox" value="1"/></td>
     <td>head</td>
     <td>首元素</td>
    </tr>
    <tr>
     <td><input type="checkbox" value="2"/