javascript - 一种将 td 合并到表中的方法

Question

所以我正在尝试创建一个每周日历。我在 javascript 中编写了一个循环，创建了空表，然后使用 php 和 javascript 从 SQL 表中获取的值修改了相应 td 的innerHTML。我的问题是，当我设置特定 td 的行跨度而不是与下一个 td 合并时，它会将它们移动到表的末尾。如果我还有 2 个声誉点，我会发布图片来显示我的问题。

这是我的代码，如果你想看一下

                // Declare usefull information about the database and host
            $mysql_host = "-host info-";
            $mysql_database = "-database info-";
            $mysql_user = "user";
            $mysql_password = "pass";

            // open the connection
            $link = mysql_connect($mysql_host,$mysql_user,  $mysql_password, $mysql_database);

            // connect to the database
            mysql_select_db($mysql_database, $link) or die('database not selected'. mysql_error());


            // Select * from the table created in the database
            $result = mysql_query("SELECT * FROM Appointment;")
            or die("Could not query:" . mysql_error());

            echo "<script type='text/javascript' > "
                . "var hours = new Array('9:00','9:30','10:00','10:30','11:00','11:30', "
                . "'12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30');"
                . ""
                . "var days = new Array('Mon','Tue','Wed','Thu','Fri','Sat');"
                . ""
                . "for (  i = 0; i < 14 ; i++ ) "
                . "{"
                . "document.write('<tr id='+hours[i]+':00'+'>');"
                . "document.write('<th>'+ hours[i]+'</th> '); "
                ." for ( k = 0 ; k < 6; k++)"
                ."{"
                . "document.write('<td id='+days[k] +'> </td>'); "
                . "}"
                . "document.write('</tr>');"
                ."}"
                . " </script> ";

                while( $row = mysql_fetch_array( $result ))
                {
                    $timestamp = strtotime($row['Date']);
                    $day = date('D', $timestamp);
                    $from = $row['StartTime'];
                    $to = $row['EndTime'];
                    $rowspan = determinRowSpanBetween($from,$to);

                    echo "<script type='text/javascript'> "
                    . " var divToAddTo = GetElementInsideContainer('".$from."','".$day."');"
                    . "divToAddTo.className = 'busy';"
                    . "divToAddTo.rowspan='".$rowspan."';"
                    . "divToAddTo.innerHTML='Something to do';"


                    . "function GetElementInsideContainer(containerID, childID) {"
                    . " var elm = {};"
                    . "  var elms = document.getElementById(containerID).getElementsByTagName('*');"
                    . "  for (var i = 0; i < elms.length; i++) {"
                    . "   if (elms[i].id === childID) {"
                    . " elm = elms[i];"
                    . " break;"
                    . " }"
                    . "}"
                    . "return elm;"
                    . "}"

                    . " </script>" ;


                }

稍后在代码中创建函数 defineRowSpanBetween。

Answer 1

如果 td 中的 rowspan > 1 只占用一个空间(即不与其他 td 合并的空间)，则会导致一大堆错误。确保您考虑到添加到 rowspan 的每一行。