需要与HTML表格
问题描述:
的意见,我想有这样的消息编写一个HTML表:需要与HTML表格
alt text http://img717.yfrog.com/img717/4348/tableo.png
该表将包含将分布在第一N列(N可能会改变)消息。 让我们调用这N列消息区域。 每条消息都位于消息区域中的X个连续单元上。 X也可能改变。
每条消息都有一个名称,其中包含以下划线分隔的单词。
你会如何建议在Javascript/jQuery的实现代码表这样的:
- 这将是容易定义消息(开始单元,结束单元格,颜色,名称)
- 名将只能在下划线之后突破(而不是在字中间)
答
线性地对单元格进行编号,将其转换为行/列,将范围内的每个单元格的背景和边框设置为...不太难。
棘手的一点是,通过让单元格的内容从单元格溢出来将文本插入顶部,因为IE的表溢出会被窃听到位。
这是我得到的似乎工作...它包含IE7的黑客,但我没有在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>
非常感谢您的代码! 我试图将消息区域更改为6列,但似乎消息文本仍然在第3列中断。那应该是这样吗? – 2010-04-21 13:26:07
哦!是啊。这是样式表中的'300%'。更新后从JavaScript为了保持一致性而编写该宽度。 – bobince 2010-04-21 15:26:43
我在IE8上收到了'message.style.width = this.width + '00%';'''无效参数错误' – 2010-04-21 15:35:16