HTML与JS Web前端入门

最新推荐文章于 2024-06-04 17:01:09 发布

Guiyide

最新推荐文章于 2024-06-04 17:01:09 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/Guiyide/article/details/78691040

版权

/ 添加

<html>
<head>
       <meta charset="UTF-8">
   
   <script>
       function regForm(){
           var username = document.getElementById("uid");
           var pwd = document.getElementById("pwd");
           var email = document.getElementById("email");

           //var msg = "<tr><td>"+username+"</td><td>"+pwd+"</td><td>"+eamail+"</td></tr>";
           //document.getElementById("tab").innerHTML += msg;

           var tr = document.createElement("tr");
           var td1 = document.createElement("td");
           td1.innerHTML = username.value;
           var td2 = document.createElement("td");
           td2.innerHTML = pwd.value;
           var td3= document.createElement("td");
           td3.innerHTML = email.value;

           tr.appendChild(td1);
           tr.appendChild(td2);
           tr.appendChild(td3);
           document.getElementById("tab").appendChild(tr);


           }
   </script>
</head>

<body>
           <div id="divId" align="center">
               姓名   <input type="text" id="uid" name="unamename" />         
               密码 <input type="password" id="pwd" name="pwd" />     
               邮箱 <input type="email"   id="email" name="email" />  <br/>
               <input type="button" value="提交" οnclick="regForm()"/>
           </div>
           <hr/>
           <div align="center">
               <table border="1px" width="43%" id="tab">
                       <tr>
                           <td>姓名</td>
                           <td>密码</td>
                           <td>邮箱</td>
                       </tr>
               </table>
           </div>
</body>
</html>

/ 复选框选全选全不选反选

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"/>
       
       <script>
           function checkAll(){
               var flag = document.getElementById("all").checked; //多选框中有一个属性checked , 点击选中为true, 如果不选中false
               var arr = document.getElementsByName("hobby");
               for(var i = 0 ; i < arr.length ; i++){
                   arr[i].checked = flag; //拿到每一个元素都是多选框的对象,也有checked属性
               }
           }

           function ckAll(){
                   var arr = document.getElementsByName("hobby");
               for(var i = 0 ; i < arr.length ; i++){
                   arr[i].checked = true;
               }
           }

           function disCK(){
                   var arr = document.getElementsByName("hobby");
               for(var i = 0 ; i < arr.length ; i++){
                   arr[i].checked = false;
               }
           }

           function resverseCK(){
                   var arr = document.getElementsByName("hobby");
               for(var i = 0 ; i < arr.length ; i++){
                   arr[i].checked = !arr[i].checked;
               }
           }
       </script>
</head>

<body>
       全选   <input type="checkbox" id="all" οnclick="checkAll()"/><br/>
       篮球: <input type="checkbox" name="hobby"/>  
       足球: <input type="checkbox" name="hobby"/>  
       排球: <input type="checkbox" name="hobby"/>  
       乒乓球: <input type="checkbox" name="hobby"/> <br/>

       <input type="button" value="全选"   οnclick="ckAll()"/>
          <input type="button" value="全不选" οnclick="disCK()"/>
          <input type="button" value="反选" οnclick="resverseCK()"/>
</body>
</html>

/ 下拉框选着并弹出选着的东西

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<!--
	得到select下中选中的option中的文本
	-->
	<script>
	//xml dom的方式实现
	function selectStu(){
	var sel = document.getElementById("stu");
	var index = sel.selectedIndex;
	var val = sel.options[index].text;
	alert(val);
	}
	</script>
	</head>

	<body>
	<select id= "stu" onchange="selectStu()">
	<option value="xiaoxue">小学</option>
	<option value="chuzhong">初中</option>
	<option value="gaozhong">高中</option>
	<option value="daxue">大学</option>
	</select>
	</body>
	</html>

///bom 浏览器对象模型 --- 操作window 浏览器窗口； location 浏览器地址栏 history 历史浏览记录 dom 文档对象模型

Guiyide

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML与JS Web前端入门

///////////////// 添加点击新增一行 --> function regForm(){ var username = document.getElementById("uid"); var pwd = docum
复制链接

扫一扫