html+css+js

水果售价表

Html文本代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html表格</title>
    <link rel="stylesheet" href="table02.css">
<!--   错误1:  js引入动态文件-->
    <script type="text/javascript" src="actual01.js"></script>
</head>
<body>
  <div class="c_fruits">
      <table class="table01">
          <tr>
              <th>名称</th>
              <th>单价</th>
              <th>数量</th>
              <th>小计</th>
              <th>操作</th>
          </tr>
<!--          showbagcolor()函数作用当鼠标悬浮在苹果这一行上的时候，这一行的背景颜色就会改变-->
          <tr onmouseover="showbagcolor()" onmouseout="clearbagcolor()">
              <td>苹果</td>
              <td>5</td>
              <td>20</td>
              <td>100</td>
<!--              问题1.导入图标？？-->
              <td><img src="删除.png" width="20px" height="20px"></td>
          </tr>
          <tr onmouseover="showbagcolor()" onmouseout="clearbagcolor()">
              <td>西瓜</td>
              <td>2</td>
<!--              <td rowspan="2">5</td> 两个单元格合并为一个单元格-->
              <td>5</td>
              <td>200</td>
              <td><img src="删除.png" width="20px" height="20px"></td>
          </tr>
          <tr onmouseover="showbagcolor()" onmouseout="clearbagcolor()">
              <td>芒果</td>
              <td>10</td>
              <td>5</td>
              <td>300</td>
              <td><img src="删除.png" width="20px" height="20px"></td>
          </tr>
          <tr>
              <td>总计</td>
              <td colspan="4">180</td>
          </tr>
      </table>
  </div>
</body>
</html>

Css样式代码

.table01 ,.table01 th,.table01 tr, .table01 td{
    /*解决table的样式只能设置为单个，不能全部覆盖到*/
    border: 1px solid black;
    /*设置表格宽度*/
    width: 700px;
    height: 50px;
    /*文字居中合并*/
    text-align: center;
    /*表格的边框合并*/
    border-collapse:collapse;
    /*设置表格行高为...*/
    /*line-height: 28px;*/
}
td{
    font-family: 华文楷体;
}
.table01{
    /*间距boby距离设置*/
    margin-top: 200px;
    margin-left: 300px;
}
.c_fruits{
    float: left;
    height: 600px;
    width: 700px;
    background-color: pink;
    /*设置div边框样式为圆角样式*/
    border-radius: 8px;
}
body{
    /*设置页面和元素之间对的间距和填充为0*/
    margin: 0px;
    padding: 0px;
    background-color: yellow;
}

js动画代码

function showbagcolor(){
    /*
    * event 当前发生的事件(当鼠标悬浮在苹果这一行上的时候)对象
    * srcElement 当前事件源(触发点<tr>)
    * tagName 事件源的标签名
    * 恢复色 (非透明色就是白色)
    *  - tr transparent行
    *  - cells threeddarkshadow
       -  试错名场面
   js效果没有起来？？？原因js文件引用错误
   alert(event.srcElement);
   srcElement(节点路径)不存在？？
   alert("触发成功！！！")
   var event = new Event();//这样的获取是有问题的！！！
   火狐下的target == ie下的srcElement
   alert("target = "+event.target);
   注意: alter没有加分号没有执行成功，哪怕是html也应该认真规范自己的代码规范!!!
   alert("TD = "+event.srcElement.tagName);//因为兼容性所以选择TD
   alert("TR = "+event.srcElement.parentElement);
   */


   //注意: 千万不要轻易尝试自己手写任何名字，能获取就获取！！！
   if(event && event.srcElement && event.srcElement.tagName == event.srcElement.tagName ){
      var TD = event.srcElement;
      var TR = TD.parentElement;
      TR.style.backgroundColor = "red";
      //注意: 或得tr就可以通过.style来设置样式backgroundColor颜色,注意加上分号;!!!
      //要求: 获取所有的单元格，改变单元格内文字的字体
      var cellss = TR.cells;
      //问题1 没有初始化，2从数组中取值(每个单元格)
      for( var i = 0; i<cellss.length; i++){
         cellss[i].style.color = "white";
         // 设置字体的大小
         // cellss[i].style.fontStyle = 50;
      }
   }
}
//恢复之前的白色和透明色(重写一遍设置颜色的代码)
function clearbagcolor(){
   if(event && event.srcElement && event.srcElement.tagName == event.srcElement.tagName ){
      var tr = event.srcElement.parentElement;
      //恢复背景颜色
      tr.style.backgroundColor = "transparent";
      //恢复字体颜色
      var cellssc = tr.cells;
      for(var i = 0; i<cellssc.length; i++){
         cellssc[i].style.color = "threeddarkshadow";
      }
   }
}

posted on 2022-06-30 19:01  lxy_keep  阅读(47)  评论(0)    收藏  举报

导航