一种在表格中合并td的方法

时间:2014-04-28 16:15:04

标签: javascript php html html-table

所以我试图创建一个每周日历。 我在javascript中编写了一个循环来创建空表,然后使用php和javascript从SQL表中获取的值修改了相应td的内部HTML。 我的问题是,当我设置特定td的rowspan而不是与下一个td合并时,它会将它们移动到我的表的末尾。如果我有2个以上的声望点,我会张贴图片以显示我的问题。

Without any rowspans With rowspans

这是我的代码,如果你想看看它

                // 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>" ;


                }

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

1 个答案:

答案 0 :(得分:1)

有一个rowpan&gt;在td中只应该占用一个空间(即一个未与其他td&s合并的空间)的1将导致一大堆错误。确保考虑添加到rowspan的每一行。