Работаю всю ночь, решая проблему. То, что я пытаюсь достичь, это таблица времени:
И, чтобы быть точным, я не могу найти решение для строки 5,6,7 в первом столбце. Это изображение из программы, работающей в IE с Silverline, и оно работает только в IE.
То, что я уже пробовал, использовало 'colspan', я пробовал с горизонтальными таблицами. Я полностью покинул стол и использовал только bootstrap столбцов, и я попробовал комбинацию обоих.
Лучшее решение, которое я смог найти, - это комбинация DIV внутри TD.
Что у меня есть пока что оба DIV находятся рядом, если они начинаются в одно и то же время запуска. Если нет, то оба элемента разлиты в 2 TD.
В конце каждый элемент должен быть перетаскиваемым, чтобы попасть в другое время в таблице. И база данных будет обновлена.
Мой код PHP / HTML / CSS с bootstrap 4 фрагментами кода: Функция генерирования 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;
}
Кто там, чтобы помочь мне с моей проблемой? Большое спасибо заранее.