[第六季]5.文档元素的隐藏与显示_将完成对文档中i元素的隐藏-优快云博客

本文链接：https://blog.youkuaiyun.com/zeephom/article/details/76935920

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

①这节课啊,还是迷之bug,复制黏贴了一下就好了,检查了n遍代码没有错,但是就是无法实现showMale(),后来dw可能觉得我检查的太勤快了,不好意思装下去了.
②首先呢敲好网页,然后呢写好showMale()函数

5.自测代码

2.课堂笔记

(1)首先编辑好页面,效果图如下

这里写图片描述

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这是一篇测试文档</title>
<script type="text/javascript" src="myjs.js"></script>
<style type="text/css">
#tb
{
    border:solid red 5px;
    width:300px;    
}
</style>
</head>

<body onLoad="showMale()">
<table id="tb">
<tr><td colspan="2"><table id="tb2">
  <tr>
    <td>姓名:</td>
    <td><input type="text" id="xm"></td>
  </tr>
  <tr>
    <td>性别:</td>
    <td><input type="radio" name="xb" id="nan" onClick="showMale();"/>
      男
      <input type="radio" name="xb" id="nv" onClick="showFemale();"/>
      女</td>
  </tr>
  <tr>
    <td>月收入:</td>
    <td><input type="text" id="ysr"></td>
  </tr>
  <tr name="nanhx">
    <td>抽烟费用:</td>
    <td><input type="text" id="cyfy"></td>
  </tr>
  <tr name="nanhx">
    <td>喝酒费用:</td>
    <td><input type="text" id="hjfy"></td>
  </tr>
  <tr name="nvhx">
    <td>化妆品费用:</td>
    <td><input type="text" id="hzpfy"></td>
  </tr>
  <tr name="nvhx">
    <td>买衣服费用:</td>
    <td><input type="text" id="myffy"></td>
  </tr>
  <tr>
    <td>结余:</td>
    <td><input type="text" id="jy"></td>
  </tr>
  <tr>
    <td colspan="2"><input type="button" value="计算结余" onClick="showMale()"></td>
  </tr>
</table></td></tr>
</table>
</body>
</html>
(2)设置登陆之后隐藏某些内容
js文件:
function showMale()
{
    document.getElementById("nan").checked=true;
    for(var i=0;i<document.getElementsByName("nvhx").length;i++)
    {
        //document.getElementsByName("nvhx")[i].style.display="none";
        document.getElementsByName("nvhx").item(i).style.display="none";
    }
}