Question

在我的网站上，我对学期，课程，时间和地点进行了时间表优化。运行优化后，会显示几个选项表。我想在表格中显示一个空学期。这是我的意思的一个例子：

enter image description here

我知道我的桌子看起来很难看，但我不能在表格中填空以使列/侧完整，因为我对表格中的数据进行了复杂的计算，如果我在将空白放入（它会尝试在空白处进行查找）。如果它也是空白的话，我也不能告诉它忽略这个盒子（请跟我一起去）。那么，有没有办法在该区域添加一个说明＆＃34;本学期没有课程＆＃34;编程？结果通常是不同的大小，所以我不能在我的网站上的位置硬记录笔记。我需要它才能知道去哪里。我没想到这是可能的，但是想把这个想法提交给你们。想法？

这将是最终目标：

- 表格形式的大量结果---

一个示例结果：

enter image description here

如果甚至可以在桌子上关闭，那么它就是一个很棒的完整盒子。 ****我需要一个JAVASCRIPT / JQUERY解决方案

更新：根据到目前为止的回复，我尝试了这个：

 if(classes.length === 0){
            var $noClasses = $('<td></td>').html('No Classes available');
            $noClasses.colSpan = "3";
            $table.append($noClasses);          

    }

这给了我

enter image description here

Answer 1

使用rowspan和colspan来解决“尴尬”问题。你的表结构。表格结构仍然是标准的，您只想跨越行和/或列跨越您的单元格：

<强> HTML

<!DOCTYPE html />
<html>
    <head>
        <style>
            td,th{
                border-style: groove;

            }
        </style>
        <title></title>
    </head>
    <body>
        <table>
            <tr>
                <th>Title1</th>
                <th>Title2</th>
                <th>Title3</th>
                <th>Title4</th>
            </tr>
            <tr>
                <td rowspan="3">Semester1</td>
                <td>Class1</td>
                <td>Time1</td>
                <td>Loc1</td>
            </tr>
            <tr>
                <td>Class2</td>
                <td>Time2</td>
                <td>Loc2</td>
            </tr>
            <tr>
                <td>Class3</td>
                <td>Time3</td>
                <td>Loc3</td>
            </tr>
            <tr>
                <td>Semester2</td>
                <td colspan="3">No Classes available</td>
            </tr>
            <tr>
                <td>Semester3</td>
                <td>Class1</td>
                <td>Time1</td>
                <td>Loc1</td>
            </tr>
        </table>
    </body>
</html>

<强>结果

enter image description here

Answer 2

所以这是最终工作的代码：

 if(classes.length === 0){
                     var $noClasses = $('<td colspan="3"></td>').addClass('noClass').html("No Classes ");   
}

但是我不得不从javascript中取出一些html / css，因为实现这部分实在太混乱了。我用icanhaz制作了一个模板并转换了一些代码，然后就可以了。

如何使用形状奇特的Javascript表添加注释

2 个答案: