javascript - 需要有关 HTML 表格的建议

Question

我想用这样的消息编写一个 HTML 表格:

alt text http://img717.yfrog.com/img717/4348/tableo.png

该表将包含分布在前 N 列(N 可能会更改)的消息。 让我们称这 N 列为消息区域。 每条消息都位于 消息区域 中的 X 个连续单元格上。 X 也可能发生变化。

每条消息都有一个名称，其中包含用下划线分隔的单词。

您建议如何使用 Javascript/jQuery 编写此表:

• 定义消息很容易(开始单元格、结束单元格、颜色、名称)
• 名称只会在下划线之后断开(而不是在单词的中间)

Answer 1

对单元格进行线性编号，转换为行/列，将每个单元格的背景和边框设置在范围内......不太难。

考虑到 IE 的表格溢出被窃听到位，棘手的一点是通过让单元格的内容从单元格溢出来将文本插入到顶部。

这是我得到的，似乎可以工作...它包含针对 IE7 的 hack，但我还没有在 IE6 上测试过，所以谁知道会发生什么。

<style type="text/css">
    #t { table-layout: fixed; width: 50%; border-collapse: collapse; }
    #t td { border: solid black 1px; height: 1.2em; overflow: visible; }
    #t .message { text-align: center; }

    /* these styles fix ie bugs */
    #t .message { position: relative; }
    #t .message div { position: absolute; top: 0; left: 0; width: 100%; }
</style>

<table id="t">
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>

<script type="text/javascript">
    var t= new MessageTable(document.getElementById('t'), 3);
    t.addMessage('SHORT_MESSAGE', 4, 16, 'yellow');
    t.addMessage('VERY_VERY_LONG_MESSAGE', 20, 14, 'cyan');

    function MessageTable(element, width) {
        return {addMessage: function(text, c, n, color) {
            // add zero-width spaces for breaking
            text= text.replace(/_/g, '_\u200B');

            // set background and borders
            for (var i= c; i<c+n; i++) {
                var x= i%width, y= Math.floor(i/width);
                var style= element.rows[y].cells[x].style;
                style.backgroundColor= color;
                style.borderLeftStyle= (i===c || x===0)? 'solid' : 'none';
                style.borderRightStyle= (i===c+n-1 || x===width-1)? 'solid' : 'none';
                style.borderTopStyle= i-c<width? 'solid' : 'none';
                style.borderBottomStyle= c+n-i<width? 'solid' : 'none';
            }

            // add message to overflowing cell in first full row
            // The do-nothing inner div is required for IE (again. bah)
            var message= document.createElement('div');
            var inner= document.createElement('div');
            message.className= 'message';
            message.style.width= width+'00%';
            message.appendChild(inner);
            inner.appendChild(document.createTextNode(text));
            element.rows[Math.ceil(c/width)].cells[0].appendChild(message);
        }};
    }
</script>