拆分表中行和列上的DIV
拆分表中行和列上的DIV
提问于 2020-01-19 18:54:02
通宵工作来解决一个问题。我想要实现的是这个时间表：
具体地说，我找不到第一列中第5,6,7行的解决方案。此图像来自于在IE中运行的Silverline程序，它只能在IE中运行。
我已经尝试了使用'colspan'，我尝试了它与桌子水平。我完全离开了这个表，只使用了引导程序，我尝试了两者的组合。
我能找到的最好的解决方案是在TD中使用DIV的组合。
到目前为止，我所知道的是，只要它们在相同的开始时间开始，两个DIV就是并排的。如果不是，那么这两个元素被分成2个TD。
最后，每个元素都必须可以拖放到表中的不同时间。
并且数据库将被更新。
我的代码PHP/HTML/CSS带有bootstrap 4代码片段: generate TABLE函数：
public function GuiXeduleWeekList($p_aSubArray) {
// ==================== Mainview classroom content =================
echo("<table border='1' class='table' width='100%' style='background-color:white'>"); // Create a new table
echo("<tr><th class='text-center'>RE</th>");
foreach($_SESSION['aWeekdays'] as $sDay){
echo("<th class='text-center'>".$sDay."</th>");// Table header
}
echo("</tr>");
for($iWeekHour = 1; $iWeekHour <= 17; $iWeekHour++){
$aThisHour = $this->arraySearch($p_aSubArray, 6, $iWeekHour);
echo("<tr>");
echo("<th>".$iWeekHour." ".$_SESSION['aREUnits'][$iWeekHour-1]."</th>");
for($iDayOfTheWeek = 1;$iDayOfTheWeek<=5;$iDayOfTheWeek++){
$aCellContent = $this->arraySearch($aThisHour, 5, $iDayOfTheWeek);
if(!empty($aCellContent)){
$this->cellContent($aCellContent);
for($iXeduleHour = $aCellContent[0][6];$iXeduleHour <= $aCellContent[0][7];$iXeduleHour++){
$aContentManager[$iXeduleHour][$aCellContent[0][5]] = FALSE;
}
} elseif($aContentManager[$iWeekHour][$iDayOfTheWeek]) {
echo("<td class='empty'><div id='drop_zone' ondragenter='drag_enter(event)' ondrop='drag_drop(event)' ondragover='return false' ondragleave='drag_leave(event)'></div></td>");
}
}
echo("</tr>");
}
echo("</table>"); // End of table with schedule items
}生成内容功能：
// A function to show the actual xedule content in the cell of the table
// @Parameters: $aCellContent type:array scope:local description: Filled with the content from the database
protected function cellContent($p_aCellContent){
$iContentCount = count($p_aCellContent);
if($iContentCount == 1){
$iLessonLength = ($p_aCellContent[0][7] - $p_aCellContent[0][6])+1;
$sLesson = $this->fetchLessonName($p_aCellContent[0][2]);
$sClassname = $this->fetchClassName($p_aCellContent[0][4]);
$sTeacher = $this->fetchTeacher($p_aCellContent[0][3]);
$sClassroom = $this->fetchClassroom($p_aCellContent[0][1]);
echo("<td draggable='true' ondragstart='drag_start(event)' ondragend='drag_end(event)' class='filled back_blue' ");
echo("rowspan='".$iLessonLength."' ><form method='post'>");
echo("<input type='hidden' name='iClass' value='".$p_aCellContent[0][4]."'>");
echo("<input type='hidden' name='iTeacher' value='".$p_aCellContent[0][3]."'>");
echo("<input type='hidden' name='iClassroom' value='".$p_aCellContent[0][1]."'>");
echo($sLesson."<br>");
echo("<input type='submit' value='".$sClassname."'><br>");
echo("<input type='submit' value='".$sTeacher."'><br>");
echo("<input type='submit' value='".$sClassroom."'></form></td>");
} else {
$iFirstRE = 17;
$iLastRE = 1;
foreach($p_aCellContent as $aCellContent){
if($aCellContent[7] > $iLastRE){
$iLastRE = $aCellContent[7];
}
if($aCellContent[6] < $iFirstRE){
$iFirstRE = $aCellContent[6];
}
}
$iCellLength = ($iLastRE - $iFirstRE)+1;
echo("<td rowspan='".$iCellLength."' class='filled back_blue'><div class='container'>");
foreach($p_aCellContent as $aCellContent){
$sLesson = $this->fetchLessonName($aCellContent[2]);
$sClassname = $this->fetchClassName($aCellContent[4]);
$sTeacher = $this->fetchTeacher($aCellContent[3]);
$sClassroom = $this->fetchClassroom($aCellContent[1]);
echo("<div draggable='true' ondragstart='drag_start(event)' ondragend='drag_end(event)'>");
echo("<form method='post'>");
echo("<input type='hidden' name='iClass' value='".$aCellContent[4]."'>");
echo("<input type='hidden' name='iTeacher' value='".$aCellContent[3]."'>");
echo("<input type='hidden' name='iClassroom' value='".$aCellContent[1]."'>");
echo($sLesson."<br>");
echo("<input type='submit' value='".$sClassname."'><br>");
echo("<input type='submit' value='".$sTeacher."'><br>");
echo("<input type='submit' value='".$sClassroom."'></form>");
echo("<br style='clear: left;' />");
echo("</div>");
}
echo("</div></td>");
}
return;
}CSS
.container {
display: flex;
padding: 0;
}
.container > div {
border: #cccccc solid 2px;
word-break: break-all;
float: left;
padding: 0;
margin-right: 12px;
margin-left: -10px;
margin-top: -10px;
}谁在外面帮我解决我的问题？在此之前，非常感谢您。
回答 1
Stack Overflow用户
发布于 2020-01-19 19:17:48
我已经尝试了使用'colspan'，我尝试了
表的水平。我完全离开了这个表，只使用了引导程序，我尝试了两者的组合。
我不确定你是否知道rowspan。
这种布局是complex，使用<table>并使其在将来用于其他块的放置更加困难。
替代方案：
display: grid;(它在IE中不起作用，但创建它是为了解决problem)position: absolute;和JS逻辑，以便将块保存在正确位置- 我相信一些甘特图 JS库将能够显示该表
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59809339
复制相关文章
相似问题
腾讯云开发者
