Creating HTML table from Java, check if TD already has a TD to the right of it -
i using gagawa (https://code.google.com/archive/p/gagawa/) library dynamically create html table display school courses on weekly schedule. problem that, because i'm using rowspan increase size of cell based on course's duration, when try to, example add course meets on mwf, typical layout row
<td>...content...</td> <td></td> <td>...content...</td> <td></td> <td>...content...</td>
but, if 2 courses overlap in time on different days, inserting blank <td> element forced right, because <td> other course exists in next column. see attached screenshot more clarification (i've drawn arrows on in red show correct layout should be; ant210.101 should on mwf, i'm trying insert blank <td> bottom half of first ant220.102 block it, gets put right of it).
i either need way dynamically detect whether or not put in blank <td> or way make instead of getting shifted right, gets shifted down (maybe there's way in css?).
below code dynamically generate html table:
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; }
logic (asked op if ok need pseudocode)
it wrong approach check if td has td right of it
right approach prevent empty td there rowspan occupation above preventing pushing out of next inserted td. "to put keep number td correct"
your coding fine need add counter each day if 5 counters(because said in example in q) , use counter walkover occupied space due above lying rowspan allotment , track when ends , apply empty td under column
column_count variable used track current position of column inside row
next 5 overlow indicators used indicated 5 columns , overflow status.and since said each row means 30 minutes logic finding if hour has started in tr find if starting time equal counter of time associated each row change causing 30 minute increment
in explanation overflow_x used isntead of each individual var name
- first of need know before hand how many rows there gonna outer loop finding left u
- now logic first use switch statement each day
- now first inside case check see if overflow_x count greater 0 understand if there need insert class details or greater 0 means allocated above rowspan default value -1.which gonna explain why
- the default value of overflow variables set -1 because each time rowspan 2 or multiple depending upon added td added , value incremented 2.so in next iteration of checked , if less 0 not insert new td goes else case , decrement value
- by bypassing chance of adding blank td , causing pushing of td right
- so here insert blank td when there no rowspan allocation above
- overlow_x checked see if 0 set -1 2n-1 rowspan has been covered
overflow variables use during iteration if shows thursday has overflow_th incremented 2.so while inserting next row when switch enters case 4 tuesday checks see if there overflow if yes overflow_th decremented .so here blank td insertion avoided in future prevent td breaking flow demo here
td{ border:1px solid black; } .pushedout{ background:red; } .bully{ background:blue; color:white }<label>here 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 value of overlow_col2=- after decrementing , finding 0 there resseting -1 normal if no such variable tracking have resulted in 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>pseudocode
var column_count=0 overflow_m=-1,overflow_tu=-1,overflow_w=-1,overflow_th=-1,overflow_fri=-1 each number of rows (int column_count=0 ;column_count<5;column_count++) { switch(column_count){ case 0: if(overflow_m<0) { if (content needs inserted) { add td , 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 inserted) { add td , insert content overflow_m=overflow_m+2; }else{ add blank td }else{ overflow_tu=overflow_tu-1; if (overflow_m==0){ overflow_m=-1 } } } .... .... 2 cases wed , thurday case 4: if(overflow_f<0) { if (content needs inserted) { add td , insert content overflow_m=overflow_m+2; }else{ add blank td }else{ overflow_f=overflow_f-1; if (overflow_m==0){ overflow_m=-1 } } } } } if not know before hand how many classes there should first iterate through classes , build data base or csv file or json file data regarding that
td { border: 1px solid black; width:20%; } table,tr{width:100%;} .pushedout { background: red; } .head{ background:magenta; } .bully { background: blue; color: white }<label>here 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 each decrement reduced till becomes 0 , upon reset to-1 , during next iteration empty td put under , incase of overflow_w empty td never put under . in case of overflow_f td no put iteration bumber 2-3 , during iteration number 4 again rows added bottom of itjavascript implementation of logic
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 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 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 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 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 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 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 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 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 inserted here becuase previous rowspan allocation taking 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 inserted here becuase previous rowspan allocation taking 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 inserted here becuase previous rowspan allocation taking 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 inserted here becuase previous rowspan allocation taking 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 inserted here becuase previous rowspan allocation taking 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 inserted here becuase previous rowspan allocation taking space"); } break; } if (trcounter == 7) { trcounter = 1; $('#schedule').append("<tr> </tr>"); $('#status').html("reached saturday moving on next time slot"); } else { trcounter++; } }else{ alert("either enter y or n (y-->allocate td class n--> go 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> dummy showing how avoid butted out tds adding rows span enter y else n , 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>
Comments
Post a Comment