[英]Need advice with HTML table
我想用這樣的消息編寫HTML表格:
替代文字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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.