javascript - 转换html表日志文件

Question

我有一个巨大的聊天日志文件，想把它转换成一个更好看的可打印文件。目前它只是一个 html 表。这是一个例子：http: //jsfiddle.net/sXCNC/

html table

最后应该是这样的：http: //i.imgur.com/RrFwikZ.png

任何想法如何自动完成？

Answer 1

在不更改 HTML 的情况下，您可以使用 CSS 执行此操作：

table, tbody, tr, td {display:block; border:0;}

tr.me {
    width:60%;
    background-color: #22A1CE;
    margin:0 0 .5em auto; padding:.5em;
}

tr.other{
    width:70%;
    background-color: #7F007F;
    margin:0 auto .5em 0;
}

thead, td:nth-child(1), td:nth-child(2), td:nth-child(6),
td:nth-child(7), td:nth-child(8) {
    display:none;
}

td:nth-child(3) {
    float:right; font-size:.8em;
}

td:nth-child(4) {
    font-size:.8em;
}

最终得到这个结果。

Answer 2

你不应该使用桌子。将每条消息放在一个 div 中，并根据消息的发送者，应用一个将在其上放置一些 CSS 规则的类，如下所示：

.me {
 float: left;
 background: red:
}

.contact {
 float: right:
 background: green;
}