java - 从 Java 创建 HTML 表格，检查 TD 是否已经在它的右边有一个 TD

标签 java html css gagawa

我正在使用 Gagawa ( https://code.google.com/archive/p/gagawa/ ) 库动态创建一个 HTML 表格来显示每周计划的学校类(class)。问题是，因为我使用 rowspan 来根据类(class)的持续时间增加单元格的大小，所以当我尝试添加一个在 MWF 上满足的类(class)时，该行的典型布局将是

<td>...content...</td> <td></td> <td>...content...</td> <td></td> <td>...content...</td>

但是，如果 2 个类(class)在时间上重叠但在不同的日期，则插入空白 <td>元素被迫向右，因为 <td>另一门类(class)已经存在于下一列中。请参阅随附的屏幕截图以获取更多说明(我在上面画了红色箭头以显示正确的布局；ANT210.101 应该在 MWF 上，但我试图在下半部分插入空白 <td>第一个 ANT220.102 阻止它，所以它被放在它的右边)。

Screenshot

我要么需要一种方法来动态检测是否要放入空白 <td>或者有一种方法可以做到这一点，而不是向右移动，而是向下移动(也许有一种方法可以在 CSS 中做到这一点？)。

下面是我动态生成 HTML 表格的代码:

public String generateHTMLScheduleTable(Schedule s){
        Table scheduleTable=new Table();
        scheduleTable.setCSSClass("scheduleTable");
        Tr dayRow=new Tr();
        Th time=new Th(); time.appendText("Time");
        Th mon=new Th(); mon.appendText("Monday");
        Th tue=new Th(); tue.appendText("Tuesday");
        Th wed=new Th(); wed.appendText("Wednesday");
        Th th=new Th(); th.appendText("Thursday");
        Th fri=new Th(); th.appendText("Friday");
        dayRow.appendChild(time, mon, tue, wed, th, fri);       
        TreeMap<Integer, String> colors=mapCoursesToColors(s);

        String[] days={"m", "t", "w", "r", "f"};

        for(int j=8; j<=22; j++){
            int timeInt=j%12;
            if(timeInt==0){
                timeInt=12;
            }
            String timeHr="" + timeInt;

            //System.out.println(timeHr);

            String amPm;
            if(j>11){
                amPm="PM";
            }
            else{
                amPm="AM";
            }
            for(int k=0; k<2; k++){
                String timeMin="";
                if(k==0){
                    timeMin="00";

                }
                else{
                    timeMin="30";
                }
                Tr currRow=new Tr();
                Td currCell=new Td();
                currCell.appendText(timeHr + ":" + timeMin + amPm);
                currRow.appendChild(currCell);

                for(int i=0; i<days.length; i++){
                    Td newCell=new Td();
                    for(Course c : s.getCourses()){
                        if((c.getTime().substring(0, c.getTime().indexOf(':')).equals(timeHr) || c.getTime().substring(0, c.getTime().indexOf(':')).equals("0" + timeHr)) && c.getTime().substring(0, c.getTime().indexOf('-')).contains(timeMin) && c.getTime().substring(0, c.getTime().indexOf('-')).contains(amPm)){
                            if(c.getDays().toLowerCase().contains(days[i])){
                                String currentColor=colors.get(c.getCRN());
                                String timeLastHalf=c.getTime().substring(c.getTime().indexOf('-')+1);
                                int startHr=Integer.parseInt(timeHr);
                                int endHr=Integer.parseInt(timeLastHalf.substring(0, timeLastHalf.indexOf(':')));
                                int numCells=endHr-startHr;
                                numCells=numCells*2;
                                if(!c.getTime().substring(0, c.getTime().indexOf('-')).contains("00")){
                                    if(timeLastHalf.contains("00")){
                                        numCells=numCells-1;
                                    }
                                }
                                else{
                                    if(!timeLastHalf.contains("00")){
                                        numCells=numCells+1;
                                    }
                                }
                                if(numCells<2){
                                    numCells=2;
                                }
                                newCell.setBgcolor(currentColor);
                                newCell.setRowspan("" + numCells);
                                newCell.appendText(c.getTitle());
                                newCell.appendChild(new Br());
                                newCell.appendText(c.getCourseAndSection());
                                newCell.appendChild(new Br());
                                newCell.appendText(c.getTime());
                                Input submit=new Input();
                                submit.setType("submit");
                                submit.setCSSClass("btn");
                                submit.setName("" + c.getCRN());
                                submit.setValue("Remove");
                                Input moreInfo=new Input();
                                moreInfo.setType("submit");
                                moreInfo.setCSSClass("btn");
                                moreInfo.setName(c.getCRN() + "View");
                                moreInfo.setValue("More Info");
                                newCell.appendChild(new Br());
                                newCell.appendChild(submit);
                                newCell.appendChild(moreInfo);
                            }
                        }
                    }
                    currRow.appendChild(newCell);
                }
                scheduleTable.appendChild(currRow);
            }
        }
        String html=scheduleTable.write();
        System.out.println(html);

        return html;
    }

最佳答案

逻辑(询问 OP 是否可以，他只需要伪代码)

It is wrong approach to check if TD already has a TD to the right of it

Right Approach is to prevent a empty td where there is a rowspan occupation above it so preventing the pushing out of next inserted td. "To simply put always keep the number td always correct"

你的代码很好，你需要做的就是每天添加一个计数器，如果有五个计数器(因为你在 Q 的例子中说过)，然后使用这个计数器来遍历由于以下原因占用的空间在行跨度分配之上并在它结束时跟踪它，然后才在该列下应用一个空的 td

column_count 是一个变量，用于跟踪列在一行中的当前位置

接下来是 5 个 Overlow 指示器，用于指示 5 列及其溢出状态。既然你说每一行意味着 30 分钟，那么你查找是否必须在 tr 中开始一个小时的逻辑是查找开始时间是与导致 30 分钟增量的每一行更改关联的时间的相等计数器

在解释中使用 Overflow_X 代替每个单独的 var 名称

  1. 首先，我们需要事先知道外层 for 循环有多少行，找到它留给您
  2. 现在有了逻辑首先我们每天都使用 switch 语句
  3. 现在首先在案例中我们检查 Overflow_X 计数是否大于零，这是为了了解是否需要插入类详细信息或大于零意味着它是由上面的 rowspan 分配的，其默认值将是 - 1.我要解释为什么
  4. 溢出变量的默认值设置为 -1，因为每次添加一个 rowspan 2 或其倍数时，都会添加一个 td 并将其值递增 2。因此在 for 的下一次迭代中检查它，如果更少比零 它不会插入一个新的 td 它会转到其他情况并递减值
  5. 通过这种方式，我们绕过了添加空白 td 并导致 td 向右推的机会
  6. 所以这里我们只在上面没有rowspan分配的时候插入一个空白的td
  7. 检查 Overlow_X 以查看其是否为零，然后将其设置为 -1，因为 2n-1 rowspan 已被覆盖

Overflow variables use so during an iteration if it shows that say thursday has Overflow_Th is incremented by 2.So while inserting next row when switch enters case 4 that is for tuesday it checks to see if there was overflow if yes then Overflow_Th is decremented .So here the blank td insertion is avoided which in future will prevent the td from breaking the flow Demo here

td{
  
  border:1px solid black;

}
.pushedOut{
  background:red;
  
}
.bully{
  background:blue;
    color:white
}
<label>Here the value of Overlow_Col2=1(-1+2)</label>
<table>
<tr>
  <td>Data</td>
  <td class="bully " rowspan="2">Pushing</td>
</tr>

<tr>
  <td>Data</td>
 
</tr>
</table>
<label>Here the value of Overlow_Col2=- after decrementing and finding it zero there for resseting to -1 so back to normal but if was no such variable for tracking it then it would have resulted in this following  <span style="color:red">situation</span> </label>
<table>
<tr>
  <td>Data</td>
  <td class="bully " rowspan="2">Pushing</td>
</tr>

<tr>
  <td>Data</td>
   <td class="pushedOut">pushed out becuase of no means of tracking td of previous row</td>
</tr>
</table>

伪代码

var column_count=0
Overflow_M=-1,Overflow_Tu=-1,Overflow_W=-1,Overflow_Th=-1,Overflow_Fri=-1

For each number of rows 

for (int column_count=0 ;column_count<5;column_count++)
    {
            switch(column_count){

                  case 0: 
                  if(Overflow_M<0)  {
                         if (content needs to be inserted)
                             {
                             add td and insert content 
                             Overflow_M=Overflow_M+2;
                }else{

                                     Add Blank td

                     }else{

                           Overflow_M=Overflow_M-1;
                           if (Overflow_M==0){
                                     Overflow_M=-1
                                           }

                     }

                  }   

                 case 1: 
                      if(Overflow_Tu<0)  {
                             if (content needs to be inserted)
                                 {
                                 add td and insert content 
                                 Overflow_M=Overflow_M+2;

                              }else{

                                         Add Blank td

                         }else{

                               Overflow_Tu=Overflow_Tu-1;
                                     if (Overflow_M==0){
                                         Overflow_M=-1
                                           }

                         }

                      }  


                     ....
                     ....
                 similarly 2 cases for wed and thurday




  case 4: 
                          if(Overflow_F<0)  {
                                 if (content needs to be inserted)
                                     {
                                     add td and insert content 
                                     Overflow_M=Overflow_M+2;



                                  }else{

                                             Add Blank td

                             }else{

                                   Overflow_F=Overflow_F-1;
                                        if (Overflow_M==0){
                                            Overflow_M=-1
                                           }

                             }

                          } 


                }
         }

如果您事先不知道有多少个类，那么您应该首先遍历类并使用相关数据构建数据库或 csv 文件或 json 文件

td {
  border: 1px solid black;
  width:20%;
}
table,tr{width:100%;}

.pushedOut {
  background: red;
}
.head{
  background:magenta;
}

.bully {
  background: blue;
  color: white
}
<label>Here the value of Overlow_Col2=1(-1+2)</label>
<table>
  <tr class="head">
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>a
    <th>Friday</th>
  </tr><tr>
    <td>Overlow_M</td>
     <td>Overlow_TU</td>
      <td>Overlow_W</td>
       <td>Overlow_Th</td>
       <td>Overlow_F</td>
       </tr>
 
 
   

  <tr>
   <td class="bully " rowspan="2">Pushing</td>

      <td>Data</td>
    <td class="bully " rowspan="4">Pushing</td>
      <td>Data</td>
       <td>Data</td>
       
         

  </tr>
  
    <tr>
     
    
      <td>Data</td>
       <td>Data</td>
    <td class="bully " rowspan="2">Pushing</td>
  </tr>
      <tr>
     
     <td>Data</td>
      <td>Data</td>

      <td>Data</td>
  </tr>
        <tr>
     
     <td>Data</td>
      <td>Data</td>
    <td>Data</td>
      <td>Data</td>
  </tr>
  <tr class="head">
    <td>Overlow_M</td>
     <td>Overlow_TU</td>
      <td>Overlow_W</td>
       <td>Overlow_Th</td>
       <td>Overlow_F</td>
       </tr>
</table>
Iteration1
Overflow_M Overflow_W with each decrement it is reduced till it becomes zero and upon which it reset to-1 and during next iteration a empty td is put under it and incase of Overflow_W empty td is never put under it  .
In case of Overflow_F td is no put from iteration bumber 2-3 and during iteration number 4 again rows are added to the bottom of it

逻辑的Javascript实现 

 var trcounter = 1;
 var O1 = -1,
   O2 = -1,
   O3 = -1,
   O4 = -1,
   O5 = -1,
   O6 = -1;

 $("#sbt").click(function() {


   var YN = $('#YorN').val();
   //$('#Schedule').append("<td rowspan=" + person + "><p>Cult Anthropology</P</td>");


   if (YN == 'Y' || YN == 'y') {
     var person = prompt("Please enter the rowspan size in multiples of two", "2");
    // alert("y");
   // alert($('#Schedule tr:last td').length);


     /*    if ($('#Schedule tr:last td').length < 6) {

           $('#Schedule tr:last ').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');

         } else {

           $('#Schedule').append("<tr> </tr>");
           $('#Schedule tr:last').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');

         }*/





     switch (trcounter) {
       case 1:
         if (O1 < 0) {
      
           if (trcounter < 7) {

             $('#Schedule tr:last ').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');

           } else {
             $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');
           }
           O1 = O1 + parseInt(person);
          // alert(O1);
         } else {
            alert("This TimeSlot on Monday is occupied");
           O1 = O1 - 1;
           if (O1 == 0) {
             O1 = -1;
           }
         }
         break;

       case 2:
         if (O2 < 0) {
      
           if (trcounter < 7) {

             $('#Schedule tr:last ').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');

           } else {
             $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');
           }
           O2 = O2 + parseInt(person);
           //alert(O1);
         } else {
           alert("This TimeSlot on Tuesday is occupied");
           O2 = O2 - 1;
           if (O2 == 0) {
             O2 = -1;
           }
         }
         break;
       case 3:
          if (O3 < 0) {
      
           if (trcounter < 7) {

             $('#Schedule tr:last ').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');

           } else {
             $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');
           }
           O3 = O3 + parseInt(person);
         //  alert(O1);
         } else {
           alert("This TimeSlot on Wednesday is occupied");
           O3 = O3 - 1;
           if (O3 == 0) {
             O3 = -1;
           }
         }
         break;
       case 4:
           if (O4 < 0) {
      
           if (trcounter < 7) {

             $('#Schedule tr:last ').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');

           } else {
             $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');
           }
           O4 = O4 + parseInt(person);
         //  alert(O1);
         } else {
           alert("This TimeSlot on Wednesday is occupied");
           O4 = O4 - 1;
           if (O4 == 0) {
             O4 = -1;
           }
         }
         break;
       case 5:
         if (O5 < 0) {
      
           if (trcounter < 7) {

             $('#Schedule tr:last ').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');

           } else {
             $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');
           }
           O5 = O5 + parseInt(person);
         //  alert(O1);
         } else {
           alert("This TimeSlot on Wednesday is occupied");
           O5 = O5 - 1;
           if (O5 == 0) {
             O5 = -1;
           }
         }
         break;
       case 6:
         if (O6 < 0) {
      
           if (trcounter < 7) {

             $('#Schedule tr:last ').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');

           } else {
             $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append('<td class="red" rowspan="' + person + '"><p>Cult Anthropology</P</td>');
           }
           O6 = O6 + parseInt(person);
          // alert(O1);
         } else {
           alert("This TimeSlot on Wednesday is occupied");
           O6 = O6 - 1;
           if (O6 == 0) {
             O6 = -1;
           }
         }
         break;

     }
     if (trcounter == 7) {
       trcounter = 1;
        $('#Schedule').append("<tr> </tr>");
       $('#Status').html("REACHED SATURDAY MOVING ON TO NEXT TIME SLOT");
     } else {
       trcounter++;

     }
   } else if(YN == 'N' || YN == 'n') {


     /* if (O1 > 0)) {
       O1--;
     } else if (O1 == 0) {
       O1 = -1;
     }
     if ($('#Schedule tr:last td').length < 6) {

       $('#Schedule tr:last ').append("<td ></td>");

     } else {
       $('#Schedule').append("<tr> </tr>");
       $('#Schedule tr:last').append("<td ></td>");
     }*/
     switch (trcounter) {
       case 1:
        //  alert("trcounter"+trcounter+"O1"+O1);
         if (O1 < 0) {
           if (trcounter < 7) {

             $('#Schedule tr:last ').append("<td ></td>");

           } else {
           //  $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append("<td ></td>");
           }
          
         } else {
           O1 = O1 - 1;
          // alert(O1);
           if (O1 == 0) {
             O1 = -1;
           }
             $('#Status').html("Empty Node Cannot be inserted here becuase previous rowspan allocation is taking up the space");
         }
         break;
   
       case 2:
         if (O2 < 0) {
           if (trcounter < 7) {

             $('#Schedule tr:last ').append("<td ></td>");

           } else {
           //  $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append("<td ></td>");
           }
          
         } else {
           O2 = O2 - 1;
          // alert(O1);
           if (O2 == 0) {
             O2 = -1;
           }
                        $('#Status').html("Empty Node Cannot be inserted here becuase previous rowspan allocation is taking up the space");
         }
         break;
       case 3:
         if (O3 < 0) {
           if (trcounter < 7) {

             $('#Schedule tr:last ').append("<td ></td>");

           } else {
           //  $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append("<td ></td>");
           }
          
         } else {
           O3 = O3 - 1;
          // alert(O1);
           if (O3 == 0) {
             O3 = -1;
           }
                      $('#Status').html("Empty Node Cannot be inserted here becuase previous rowspan allocation is taking up the space");
         }
         break;
       case 4:
        if (O4 < 0) {
           if (trcounter < 7) {

             $('#Schedule tr:last ').append("<td ></td>");

           } else {
           //  $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append("<td ></td>");
           }
          
         } else {
           O4 = O4 - 1;
          // alert(O1);
           if (O4 == 0) {
             O4 = -1;
           }
                        $('#Status').html("Empty Node Cannot be inserted here becuase previous rowspan allocation is taking up the space");
         }
         break;
       case 5:
         if (O5 < 0) {
           if (trcounter < 7) {

             $('#Schedule tr:last ').append("<td ></td>");

           } else {
           //  $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append("<td ></td>");
           }
          
         } else {
           O5 = O5 - 1;
          // alert(O1);
           if (O5 == 0) {
             O5 = -1;
           }
                          $('#Status').html("Empty Node Cannot be inserted here becuase previous rowspan allocation is taking up the space");
         }
         break;
       case 6:
         if (O6 < 0) {
           if (trcounter < 7) {

             $('#Schedule tr:last ').append("<td ></td>");

           } else {
           //  $('#Schedule').append("<tr> </tr>");
             $('#Schedule tr:last').append("<td ></td>");
           }
          
         } else {
           O6 = O6 - 1;
          // alert(O1);
           if (O6 == 0) {
             O6 = -1;
           }
                       $('#Status').html("Empty Node Cannot be inserted here becuase previous rowspan allocation is taking up the space");
         }
         break;

     }
     if (trcounter == 7) {
       trcounter = 1;
        $('#Schedule').append("<tr> </tr>");
       $('#Status').html("REACHED SATURDAY MOVING ON TO NEXT TIME SLOT");
     } else {
       trcounter++;
     }


   }else{
    alert("Either Enter Y or N (Y-->Allocate td with class N--> Go to Next day)");
   }


 });
.red {
  background: red;
}
table{border:1px black solid;width:100%;}
td{width:16.66%;
max-width:16.66%;
height:50px;
}
#Status{
  
  Color:cyan;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p>
  This is a dummy showing how to avoid butted out tds so for adding a rows span enter y else n and click proceed

</p>
<p id="Status">

</p>
<input id="YorN" type="text" />
<input type="button" id="sbt" value="Proceed  " />
<table>
<tr>
    <td>
      Monday</td>
    <td>
      Tuesday</td>
    <td>
      Wednesday</td>
    <td>
      Thursday</td>
    <td>
      Friday</td>
    <td>
      Saturday</td>
  </tr>

</table>
</table>
<table id="Schedule">
  <tr></tr>
</table>

关于java - 从 Java 创建 HTML 表格，检查 TD 是否已经在它的右边有一个 TD，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36726898/

上一篇：javascript - JS HTML CSS Accordion

下一篇：javascript - 在包装无效输入字段的 div 上的表单提交上应用类

相关文章：

java - Hibernate Validator - 根据生命周期进行可选验证

javascript - html 每行代码换行

html - Bootstrap 断点 - 有问题

jquery - 左右动画列表项

javascript - 使用 JavaScript 使图像可见

java - 检测 JPanel 卸载/关闭事件

java - Spring Boot 和 Spring Security 在有效登录时返回 404

java - 更改方向导致应用程序崩溃 android.support.v4.app.ListFragment

html - CSS - IE7 忽略第一个列表项的边距？

css - 创建线性渐变背景叠加层

©2024 IT工具网  联系我们