如何添加形状奇特的音符 Javascript table

Question

在我的网站上，我对学期、类、时间和地点进行了优化。优化后运行，出现了几个table的选择。我想在 table 中显示一个空学期。这是我的意思的一个例子：

我知道我的 table 看起来很丑，但我不能在 table 中放置空白来使列/边完整，因为我运行正在计算复杂的table 中的数据如果我要放入空白就会被破坏（它会尝试对空白进行查找）。如果它是空白的，我也不能告诉它忽略该框（在这里和我一起去）。那么，有没有办法以编程方式在该区域添加注释 "No classes for this semester" ？结果通常大小不一，所以我不喜欢在我的网站上的某个位置硬编码以获取注释。我需要它来知道去哪里。我不认为这是可能的，但想向你们提出这个想法。想法？

这将是最终目标：

--tables 形式的大量结果 ---

一个示例结果：

如果它甚至可以在 table 中关闭，那么它是一个完整的盒子，那就太好了。 ****我需要一个 JAVASCRIPT / JQUERY 解决方案

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

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

    }

这给了我

Answer 1

使用 rowspan 和 colspan 来容纳 table 结构的 'awkwardness'。 table 结构仍然是标准结构，您只是想将单元格跨行 and/or 列：

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>

结果

Answer 2

所以这是最终有效的代码：

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

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

如何添加形状奇特的音符 Javascript table

How to add a note with an oddly shaped Javascript table

javascript

css

html-table