javascript - 如何让一个表行上的 div(绿线)继续到下一个

Question

我正在尝试创建一个简单的日程安排日历。在事件跨越多天的情况下，我无法在一个表行的 div 中获取事件(绿线)以在下一行继续。如附图所示 Calendar

请帮忙。代码:JS.do

Answer 1

使用秒<div>然后你可以做任何你想做的事。例如:

<table>
	<thead>
    	<tr>
    		<th style="height:10px; width:100px">Monday</th>
            <th style="height:10px; width:100px">Tuesday</th>
            <th style="height:10px; width:100px">Wednesday</th>
            <th style="height:10px; width:100px">Thursday</th>
            <th style="height:10px; width:100px">Friday</th>
            <th style="height:10px; width:100px">Saturday</th>
            <th style="height:10px; width:100px">Sunday</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
        	<td><div style="height:100px; width:100px; background-color:red; ">1
            	<div style="height:10px; width:1000px; background-color:green;"></div>
            </div></td>
            <td><div style="height:100px; width:100px">2</div></td>
            <td><div style="height:100px; width:100px">3</div></td>
            <td><div style="height:100px; width:100px">4</div></td>
            <td><div style="height:100px; width:100px">5</div></td>
            <td><div style="height:100px; width:100px">6</div></td>
            <td><div style="height:100px; width:100px">7</div></td>
        </tr>
        <tr>
        	<td><div style="height:100px; width:100px">
                8
                <div style="height:10px; width:1000px; background-color:green;"></div>
                </div></td>
            <td><div style="height:100px; width:100px">9</div></td>
            <td><div style="height:100px; width:100px">10</div></td>
            <td><div style="height:100px; width:100px">11</div></td>
            <td><div style="height:100px; width:100px">12</div></td>
            <td><div style="height:100px; width:100px">13</div></td>
            <td><div style="height:100px; width:100px">14</div></td>
        </tr>
    </tbody>
</table>
<script></script>