一天24小时每隔15分钟96个点操作（一）-CSDN博客

本文链接：https://blog.csdn.net/weixin_38195943/article/details/136228588

该博客介绍了如何使用HTML创建一个12*8的时间表，并通过JS进行数据初始化和填充。内容包括表格结构、JS代码段以及后台数据获取的Java实现。文章探讨了当前实现的不足，并提出了优化方案，建议将时间表改为24*4的格式，以覆盖0到23小时并减少重复处理。

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

页面画表单：

(格子算法12*8=96其中12是指0到11,其中8是指上午和下午的00 15 30 45 )

html代码

            <table class="tableLine"  cellspacing="0" cellpadding="2" border="1">
                              <tr>
                               <td rowspan="2" class="trTitle">小时</td>
                               <td colspan="4" class="trTitle">上午(00：00-11：45)</td>
                               <td rowspan="2" class="trTitle">小时</td>
                               <td colspan="4" class="trTitle">下午(12：00-23：45)</td>
                              </tr>
                               <tr>
                               <td  class="trTitle">00</td>
                               <td  class="trTitle">15</td>
                               <td  class="trTitle">30</td>
                               <td  class="trTitle">45</td>
                               <td  class="trTitle">00</td>
                               <td  class="trTitle">15</td>
                               <td  class="trTitle">30</td>
                               <td  class="trTitle">45</td>
                              </tr>
                              
                              <c:forEach begin="0" end="11" step="1" var="x" >
                                        
                              <tr>
                               <td  class="trTitle">${x}</td>                                       
                               <td  ><input type="text" name="${x}00"  style="width:60px" value=""     validate="{maxlength:16,required:true,number:true}" > </td>
                               <td  ><input type="text" name="${x}15"  style="width:60px" value="" validate="{maxlength:16,required:true,number:true}"> </td>
                               <td  ><input type="text" name="${x}30"  style="width:60px" value="" validate="{maxlength:16,required:true,number:true}"> </td>
                               <td  ><input type="text" name="${x}45"  style="width:60px" value="" validate="{maxlength:16,required:true,number:true}"> </td>
                               <td  class="trTitle">${x+12} </td>
                               <td  ><input type="text" name="${x+12}00"  style="width:60px" value="" validate="{maxlength:16,required:true,number:true}"> </td>
                               <td  ><input type="text" name="${x+12}15"  style="width:60px" value="" validate="{maxlength:16,required:true,number:true}"> </td>
                               <td  ><input type="text" name="${x+12}30"  style="width:60px" value="" validate="{maxlength:16,required:true,number:true}"> </td>
                               <td  ><input type="text" name="${x+12}45"  style="width:60px" value="" validate="{maxlength:16,required:true,number:true}"> </td>
                              </tr>
                             
                              </c:forEach>
                                                
            </table>

js代码

        //初始化表格中的数据
            var loadValue ="${loadDate.value}";        
            if(loadValue!=''&&loadValue!=null ){
                        var tmpJson = eval("("+loadValue+")");
                        for(var i=0;i<=11;i++){
                            var v = "v"+i;
                            var v2 = "v"+(i+12);
                            $("input[name='"+i+"00']").val(tmpJson[v+"00"]);  
                            $("input[name='"+i+"15']").val(tmpJson[v+"15"]);  
                            $("input[name='"+i+"30']").val(tmpJson[v+"30"]);  
                            $("input[name='"+i+"45']").val(tmpJson[v+"45"]); 
                            
                            $("input[name='"+(i+12)+"00']").val(tmpJson[v2+"00"]);  
                            $("input[name='"+(i+12)+"15']").val(tmpJson[v2+"15"]);  
                            $("input[name='"+(i+12)+"30']").val(tmpJson[v2+"30"]);  
                            $("input[name='"+(i+12)+"45']").val(tmpJson[v2+"45"]); 

                        } 
            
            }

提交到后台，后台的获取

Map<String, String> map = new HashMap<String, String>();
        String tmp1 = "";
        String tmp2 = "";
        String tmp3 = "";
        String tmp4 = "";
        String tmp5 = "";
        String tmp6 = "";
        String tmp7 = "";
        String tmp8 = "";

        for (int i = 0; i < 12; i++) {
            tmp1 = request.getParameter(i + "00");
            tmp2 = request.getParameter(i + "15");
            tmp3 = request.getParameter(i + "30");
            tmp4 = request.getParameter(i + "45");
            tmp5 = request.getParameter(i + 12 + "00");
            tmp6 = request.getParameter(i + 12 + "15");
            tmp7 = request.getParameter(i + 12 + "30");
            tmp8 = request.getParameter(i + 12 + "45");
            if (BeanUtils.isEmpty(tmp8)) {
                tmp8 = "''";
            }
            if (BeanUtils.isEmpty(tmp1)) {
                tmp1 = "''";
            }
            if (BeanUtils.isEmpty(tmp2)) {
                tmp2 = "''";
            }
            if (BeanUtils.isEmpty(tmp3)) {
                tmp3 = "''";
            }
            if (BeanUtils.isEmpty(tmp4)) {
                tmp4 = "''";
            }
            if (BeanUtils.isEmpty(tmp5)) {
                tmp5 = "''";
            }
            if (BeanUtils.isEmpty(tmp6)) {
                tmp6 = "''";
            }
            if (BeanUtils.isEmpty(tmp7)) {
                tmp7 = "''";
            }
            map.put("'v" + i + "00'", tmp1);
            map.put("'v" + i + "15'", tmp2);
            map.put("'v" + i + "30'", tmp3);
            map.put("'v" + i + "45'", tmp4);
            map.put("'v" + (i + 12) + "00'", tmp5);
            map.put("'v" + (i + 12) + "15'", tmp6);
            map.put("'v" + (i + 12) + "30'", tmp7);
            map.put("'v" + (i + 12) + "45'", tmp8);

            map.put("'v" + i + "15'", tmp2);
            map.put("'v" + i + "30'", tmp3);
            map.put("'v" + i + "45'", tmp4);
            map.put("'v" + (i + 12) + "00'", tmp5);
            map.put("'v" + (i + 12) + "15'", tmp6);
            map.put("'v" + (i + 12) + "30'", tmp7);
            map.put("'v" + (i + 12) + "45'", tmp8);

        }

看图可得出优化方案，可改为24*4的方式即0到23 剩 00 15 30 45 四个数