- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 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 阻止它,所以它被放在它的右边)。
我要么需要一种方法来动态检测是否要放入空白 <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;
}
最佳答案
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 名称
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/
好的,这听起来很简单,但我已经花了几个小时在谷歌上搜索,我只是找不到解决方案,这并不复杂。 我想创建一个包含图像和文本的表格。我希望表格的每一行都具有相同的高度。我希望文本始终从顶部开始。 IE。 \
在我的网站表单上 - 我的出生日期、月份和年份菜单显示在两行上,我希望它们都显示在同一行上。 当我测试代码时,它显示在一行中,所以我相信一定存在宽度问题。 您可以在右侧表格 (incomeprotec
我们需要跟踪和审核生产,本质上我们有很多订单,但我们似乎在途中丢失了一些产品(废品等)。 为了阻止这种情况,我们现在已在 Google 表格上下了订单,并列出了应有的数量,然后员工会写下收到的数量。
我正在转换我的应用程序,以便它适用于 iOS 7。在应用程序的一部分,我有两个搜索栏,每个搜索栏都有一个与之关联的 UISearchDisplayController。当我搜索 UISearchDis
正如标题所说,非固定表格布局是否与类似的 HTML 表格具有相同的性能问题? 最佳答案 非固定表格的问题在于,要确定一列的宽度,必须加载该列的所有单元格。这仅在...... …您有一个包含几千字节或几
我在使用 Javascript 遍历表格并从一行的第一个单元格获取文本时遇到问题。我想获取此单元格的文本,以便我可以将它与其他内容进行比较,如果文本匹配则删除该行。但是,当我尝试获取文本时,实际出现的
我经常发现自己想要制作一个表格表格——一堆行,每一行都是一个单独的表格,有自己的字段和提交按钮。例如,这是一个宠物店应用程序示例——假设这是一个结帐屏幕,您可以选择更新所选宠物的数量和属性,并在结帐前
看过许多UBB代码,包括JS,ASP,JSP的,一直没发现表格的UBB,虽然可以直接用HTML模式实现相同表格功能,但对于某些开放的站点来说开放HTML模式终究是不合适的,故一直想实现表格的UBB。
表格由 table 标签来定义。每个表格均有若干行(由 tr 标签定义),每行被分割为若干单元格(由 td 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格
我有一个 HTML 与 border-radius和使用 position: sticky 的粘性标题看起来像这样: https://codepen.io/muhammadrehansaeed/pen
对于 iPhone 应用程序,我需要以网格格式显示只读表格数据。该数据可能有许多行和列。 我可以使用 UITableView,但问题是数据很可能会非常宽并且需要滚动。 有没有办法将 UITableVi
我知道这里有类似的问题,但我找不到适合我的答案。 我想要的是显示表单“默认”是选择了某些选项(在这种情况下,除了“Ban Appeal”或“Ban Appeal(西类牙语)”之外的所有内容,我希望仅在
天啊! 我想在Flutter中创建以下非常简单的表。基本上是两列文字,左列右对齐,右列左对齐。如果右列具有多个名称,则每一行都将顶部对齐。 左列应自动调整为最大项目的大小(因为每个标题都有翻译字符串)
我们开始构建 SSAS 表格模型,并想知道大多数人是否拥有一个或多个模型。如果有多个,您是否复制每个所需的表,或者是否有办法在模型之间共享表?我想我知道答案,但我希望那些有更多经验的人能够证实我们的发
tl;博士 如何将任意数量的单词分成两列,总是在最后一列中只有最后一个单词,在第一列中包含所有其他单词? =IFS( LEN(C2)-LEN(SUBSTITUTE(C2," ",""))=1, SP
你们知道一个图表或dable,它可以提供一个简短而简洁但仍然完整且相对最新的现有协议(protocol)及其细节的 View ? (即:ZeroMQ、Rendez-Vous、EMS、...所有这些!:
我才刚刚开始开发MFC应用程序,我希望对整个“控件”概念更加熟悉。我在Visual Studio中使用对话框编辑器,到目前为止,我无法找到添加简单表/网格的功能。这对我来说似乎很基础,但是我什至找不到
我需要对一个非常大的表或矩阵执行计算和操作,大约有 7500 行和 30000 列。 矩阵数据将如下所示: 文件编号|字1 |字 2 |字 3 |... |字 30000 |文档类 0032 1 0
我正在使用设计非常糟糕的数据库,我需要在编写查询之前重新调整表格。 以下是我的常见问题: 时间戳已分为两列(一列用于日期,另一列用于时间)。 一些字符串列也被拆分成多个列。 大多数字符串都有固定长度和
我正在尝试显示 $row["name"] 通过 HTML Table 的形式,如下所示: echo " ".$row["name"]." "; 我也从这里获取行变量: $que
我是一名优秀的程序员,十分优秀!