前端单选框、单选按钮、下拉列表多条件过滤数据

最新推荐文章于 2024-05-08 17:31:47 发布

原创

最新推荐文章于 2024-05-08 17:31:47 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #数据

本文展示了如何利用前端技术，结合JavaScript，实现单选框、单选按钮和下拉列表进行多条件的数据过滤。通过页面渲染和控制代码的解析，详细阐述了这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果图

2、页面渲染及控制代码

<div class="select">
			            <span>选课情况：</span>
			    		<select id = "xueke">
			    			<option value="0" selected="selected">全科</option>
			    			<option value="1">化学-生物-地理-政治</option>
			    			<option value="2">化学-生物-历史-地理</option>
			    			<option value="3">化学-生物-历史-政治</option>
			    			<option value="4">物理-地理-政治</option>
			    			<option value="5">物理-化学-生物-地理</option>
			    			<option value="6">物理-化学-生物-历史</option>
			    			<option value="7">物理-化学-生物-政治</option>
			    			<option value="8">物理-历史-地理</option>
			    			<option value="9">物理-历史-政治</option>
			    		</select>
			    	</div>
		
		<div id = "leibie" class = "qiehuan">
	        <label class = "wei"><input name="radio" type="radio" value="10"  checked="checked"/>未折分 </label> 
			<label><input name="radio" type="radio" value="11" />折分 </label> 
		</div>
		<div class = "guolv">
			<div id = "gouxuan">
				<input type="checkbox" name="test" value="a"/><span>去除单科缺考人员</span>
				<input type="checkbox" name="test" value="b"/><span>科目换算成100分</span>
				<input type="checkbox" name="test" value="c"/><span>体育成绩分析</span> 
			</div>	
		</div>
        <div class="page-content" style="margin-left: 0px;margin-top:-50px;" id = "buzhefen">
                <table class="table table-striped table-bordered table-hover rpt_grade_score_DetailGrid"  align='center'>
                </table>
        </div>
        
        
            <div class="page-content" style="margin-left: 0px;margin-top:-50px;" id = "zhefen">
                
                <table class="table table-striped table-bordered table-hover rpt_grade_score_DetailGrid1"  align='center'>
                </table>
            </div>

<script id="rpt_grade_score_DetailGrid" type="text/template">
            <thead>
                <tr>
                    <th>班级</th>
                    <th>姓名</th>
                    <th>学号</th>
					<th>选课情况</th>
					<th>全科总分</th>
                    <th>排名</th> 
					<th>主科总分</th>
                    <th>排名</th> 
                    <%_.each(title, function(t){%>
                        <th>
                            <%=t.xkName%>
                        </th>
                        <th>
                            <%=t.xkNameRank%>
                        </th>
                    <%})%>
                    
                </tr>
            </thead>
            <tbody>
                <%_.each(stuScore, function(stu){%>
                    <tr class="odd">
                        <td>
                            <%= stu.classCode %>
                        </td>
                        <td>
                            <%= stu.stuName %>
                        </td>
                        <td>
                            <%= stu.stuCode %>
                        </td>
						<td>
                            <%= stu.categoryName %>
                        </td>

						<td style="font-weight:bold;background-color:#eee;">
                            	<%= stu.stuMixScore %>
                       	</td>
                        <td style="font-weight:bold;background-color:#eee;">
                             <%= stu.stuMixRank %>
                        </td>

						<td>
                             <%= stu.stuPriMixScore %>
                           </td>
                           <td>
                             <%= stu.stuPriMixRank %>
                           </td>
					

                        <% var i = 0%>
                            <%_.each(stu.score, function(t){%>
                                <% if(i%2 == 0){%>
                                    <% if( t == -1){%>
                                        <td style="background-color:#CCC;"></td>
                                    <%}else{%>
                                        <td>
                                            <%= t %>
                                        </td>
                                    <%}%>
                                <%}else{%>
                                    <% if( t == -1){%>
                                        <td style="background-color:#CCC;"></td>
                                    <%}else{%>
                                        <td style="background-color:#eee;">
                                            <%= t %>
                                        </td>
                                    <%}%>
                                <%}%>
                            <%i++;})%>
                           
                    </tr>
                    <%})%>
            </tbody>
        </script>
        
        
        <script id="rpt_grade_score_DetailGrid1" type="text/template">
             <thead>
                <tr>
                    <th>班级</th>
                    <th>姓名</th>
                    <th>学号</th>
					<th>选课情况</th>
					<th>总分</th>
                    <th>排名</th>
					<th>总分(折分)</th>
                    <th>排名</th>  
					<th>主科总分</th>
                    <th>排名</th>
					<th>语文</th>
                    <th>排名</th>
					<th>数学</th>
                    <th>排名</th>
					<th>英语</th>
                    <th>排名</th>
					<th>物理</th>