Web front-end experiment 4

Language 2023-08-19 01:36:46 views: null

insert image description here

	<html>
	    <head>
	
	
	<style type="text/css">
	.odd{
    
     background-color:#FFF38F;}
	.even{
    
     background-color:#FFFFEE; }
	.selection{
    
    background-color:#FF6500; }
	table
	{
    
    
	    border-spacing: 0;
	    margin-right: auto;
	    margin-left: auto;
	
	 }
	 th, td
	 {
    
    
	    border: 1px solid #000;
	    font-size: 12px;
	    font-weight: normal;
	    text-align: center;
	    vertical-align: middle;
	    height: 20px;
	 }

	</style>
	</head>
	
	<body>
	    <table id="table1" >
	        <tr>
	            <th style="width: 50px;"></th>
	            <th style="width: 50px;">姓名 </th>
	            <th style="width: 50px;">性别</th>
	            <th style="width: 160px;">暂住地</th>
	        </tr>
	        <tr id="td2">
	            <td> <input type="radio" name="rd" value="td2"/></td>
	            <td>张三</td>
	            <td>男</td>
	            <td>四川成都</td>
	        </tr>
	        <tr id="td3">
	            <td> <input type="radio"  name="rd" value="td3" /></td>
	            <td>李四</td>
	            <td>女</td>
	            <td>四川德阳</td>
	        </tr>
	        <tr id="td4">
	            <td> <input type="radio" name="rd"  value="td4" /></td>
	            <td>王五</td>
	            <td>女</td>
	            <td>四川南充</td>
	        </tr>
	        <tr id="td5">
	            <td> <input type="radio"  name="rd" value="td5" /></td>
	            <td>赵六</td>
	            <td>男</td>
	            <td>四川绵阳</td>
	        </tr>
	        <tr id="td6">
	            <td> <input type="radio"  name="rd" value="td6" /></td>
	            <td>陈勇</td>
	            <td>男</td>
	            <td>四川德阳</td>
	        </tr>
	        <tr id="td7">
	            <td> <input type="radio"  name="rd" value="td7" /></td>
	            <td>罗梅</td>
	            <td>女</td>
	            <td>四川宜宾</td>
	        </tr>
	</table>
	
	</body>
  
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
    
    
          $("#table1 tr:odd").addClass("odd");
          $("#table1 tr:even").addClass("even");

          $('input:radio[name="rd"]').click(function(){
    
    
                $("input[type='radio']").each(function () {
    
    
            //循环使用is进行判断
              if ($(this).is(":checked")) {
    
            
                $("#table1 tr:odd").attr({
    
    
                 "class" : "odd"
                 })
                $("#table1 tr:even").attr({
    
    
                "class" : "even"
                })              
                $("#"+$("input[name='rd']:checked").val()).attr({
    
    
                 "class" : "selection"
                })
              }
                });
           });

      })

</script>

	</html>

insert image description here

	<html>
	    <head>
	     <script src="https://code.jquery.com/jquery-3.1.1.min.js">
	     </script>
	
	<style type="text/css">
		.odd{
    
     background-color:#FFF38F;}
		.even{
    
     background-color:#FFFFEE; }
		.selection{
    
    background-color:#FF6500; }
		body{
    
    
			height:90%;width:40%;
			position:fixed;
			top:0;right:0;bottom:0;left:0;
			margin:auto;
		}
		table
		{
    
    
			border-spacing: 0;
		
		}
		th, td
		{
    
    
			border: 1px solid #000;
			font-size: 12px;
			font-weight: normal;
			text-align: center;
			vertical-align: middle;
			height: 20px;
		}
		.checbox{
    
    
			margin-right: auto;
			margin-left: auto;
			margin-top: 20px;
			margin-bottom: 20px;
		}
	</style>
	</head>
	
	<body>
	    <div>
	        <div class="checbox">
	            <label>查询：</label>
	            <input type="text" value="" id="check_input" >
	        </div>
	
	        <table id="table1" >
	            <tr>
	                <th style="width: 50px;">姓名 </th>
	                <th style="width: 50px;">性别</th>
	                <th style="width: 160px;">暂住地</th>
	            </tr>
	            <tr  name="a">
	    
	                <td>张三</td>
                     <td>男</td>
	                <td>四川成都</td>
	            </tr>
               <tr name="a">
	    
	                <td>李四</td>
	                <td>女</td>
	                <td>四川德阳</td>
	            </tr>
	            <tr name="a">
	    
	                <td>王五</td>
	                <td>女</td>
	                <td>四川南充</td>
	            </tr>
	            <tr name="a">
	    
	                <td>赵六</td>
	                <td>男</td>
	                <td>四川绵阳</td>
	            </tr>
	            <tr name="a">
	    
	                <td>蒋七</td>
	                <td>男</td>
	                <td>四川内江</td>
	            </tr>
	            <tr name="a">
	    
	                <td>蔡八</td>
	                <td>男</td>
	                <td>四川简阳</td>
	            </tr>
	    </table>
	    </div>
	
	</body>
	
    <script type="text/javascript">
        //   $(document)是一个选择器，选中的是整个html所有元素的集合。
        //   .ready表示当前文档加载完毕后立即执行的函数
       $(document).ready(function () {
    
    
        //选中 id 值为 table1 的表格中的所有奇数行，odd表示奇数
       $("#table1 tr:odd").addClass("odd");
       // 选中 id 值为 table1 的表格中的所有偶数行，odd表示偶数
       $("#table1 tr:even").addClass("even");
        // .click表示点击时  .keyup表示键入文本时
       $("#check_input").keyup(function() {
    
    
        // 拿到input框内的值
           var text=$("#check_input").val();
           // 将name为a的框全部隐藏
             $("tr[name='a']").hide();
            // filter()方法来过滤出符合条件的行，并使用show()方法将它们显示出来。
           // 使用:contains选择器来匹配包含指定文本的元素，
           // 将文本变量text包裹在单引号中，以便将其作为字符串传递给选择器。  
             $("tr[name='a']").filter(":contains('" + text + "')").show();
       })
   
       })
   </script>


	</html>

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        select {
    
    
        border: 1px solid ;
        }
    </style>

</head>
<body>
    
    <!-- for属性用于指定该标签所对应的表单元素的 id 值
    for属性是用于将 <label> 标签与表单元素关联起来的 -->
    <label for="province">请选择省份：</label>
    <select id="province">
        <option value="">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangdong">广东</option>
    </select>
    
    <label for="city">请选择城市：</label>
    <select id="city">
        <option value="">请选择</option>
    </select>


</body>

<!-- 级联选择思路，当用户选择了某一个特定省份，
    我们就将该省份得城市拼接进去 -->

<script src="./js/jquery-3.1.1.min.js"></script>
    <script>
        // $(document)表示选择全页所有的html元素
        // .ready表示一进入页面就开始加载该方法
        $(document).ready(function() {
    
    
        // 当省份选择框的值改变时,执行该方法
        $('#province').change(function() {
    
    
        // 获取选中的省份
        var selectedProvince = $("#province").val();
    
    // 根据选中的省份，设置相应的城市选项
    if (selectedProvince === 'beijing') {
    
    
      $('#city').html('<option value="">请选择</option><option value="dongcheng">东城区</option><option value="xicheng">西城区</option><option value="chaoyang">朝阳区</option>');
    } else if (selectedProvince === 'shanghai') {
    
    
      $('#city').html('<option value="">请选择</option><option value="huangpu">黄浦区</option><option value="xuhui">徐汇区</option><option value="changning">长宁区</option>');
    } else if (selectedProvince === 'guangdong') {
    
    
      $('#city').html('<option value="">请选择</option><option value="guangzhou">广州市</option><option value="shenzhen">深圳市</option><option value="zhuhai">珠海市</option>');
    } else {
    
    
      $('#city').html('<option value="">请选择</option>');
    }
  });
});

        
</script>

</html>

insert image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
    
        fieldset {
    
    
            text-align: center;
            border: 1px solid black);
        }
        
        input {
    
    
            margin-top: 30px;
            margin-bottom: 20px;
        }

        table{
    
    
            margin: auto;
            border: 1px solid rgb(198, 176, 176);
            border-collapse: collapse;
        }
    
        tr{
    
    
            border: solid;
            border-collapse: collapse;
        }

        
        th{
    
    
            border: solid;
         
        }


        td{
    
    
            border: solid;
        }

    </style>

</head>
<body>

    <form id="inputData">
    <!-- <fieldset>标签，将表单中的一组相关字段分组在一起。 -->
    <!-- <legend>与<fieldset>标签一起搭配使用，用于定义表单的标题 -->
        <fieldset>
            <legend>添加新员工</legend>
             name:<input type="text" id="name" /> 
             email:<input type="text" id="email" /> 
             salary:<input type="text" id="salary" /><br/>
            <input type="button" value="Submit" id="submit" />
        </fieldset>
    </form>


    <table id="data">

        <tr>
            <th>Name</th>
            <th>Mmail</th>
            <th>salary</th>
            <th></th>
        </tr>       

    </table>

</body>


<script src="/js/jquery-3.1.1.min.js"></script>
<script>
    
    $("#submit").click(function(){
    
    
        console.log("点击了提交按钮!");
        let name = $("#name").val();
        let email = $("#email").val();
        let salary = $("#salary").val();
        console.log(name+" "+email+" "+salary);
        let data = "<tr id='del'>"
                    +"<td>"+name+"</td>"
                    +"<td>"+email+"</td>"
                    +"<td>"+salary+"</td>"
                    +"<td><a id='del' href='#' onClick='clickA()'>Delete</a></td></tr>";
        $("#data").append(data);

    });

    function clickA(){
    
    
        $("#del").remove();
    }


</script>

</html>

Guess you like

Origin blog.csdn.net/ailaohuyou211/article/details/130239630
Recommended
Face Wall Intelligence releases the Eurux-8x22B open source large model - it can be called the "science champion"
Kaiyuan Daily | Google supports Hongmeng to take over; open source Rabbit R1; Android phones supported by Docker; Microsoft’s anxiety and ambition; Haier Electric shuts down the open platform
Ranking
Jianzhi offer interview questions 68-II. The nearest common ancestor of a binary tree (recursive)
jQuery Mobile development 1-UI components
Summary of Kotlin function knowledge
[ZZ] The Naked Truth About Anisotropic Filtering
Diagnosis: record a recovery of abnormal CRASH storage caused the database to be unable to be opened normally
Redis introduction and Linux installation Redis
Experiment 2 Introduction to switches
glances open source command-line system monitoring tools introduced
Use of selector
vue3 handwriting a carousel picture
Daily
More
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)

Code World

© 2018 codetd.com