jquery实现 收到新的消息后 排在最上面
这种效果怎么实现,收到最新一条后放在最顶部,也就现在5.5号的上面。其他的往下推移。
————————————|
| 消息框 总共5条消息|
| 5.5号 |
| 5.4号 |
| 5.3号 |
| 5.2号 |
| 5.1号 |
------------------------|
- HTML code
<tbody><tr> <td class="img"></td> <td class="msg"> 5.5号</td></tr><tr> <td class="img"></td> <td class="msg"> 5.4号</td></tr><tr> <td class="img"></td> <td class="msg"> 5.3号</td></tr><tr> <td class="img"></td> <td class="msg"> 5.2号</td></tr><tr> <td class="img"></td> <td class="msg"> 5.1号</td></tr></tbody></table>
[解决办法]
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.js'></script><style type='text/css'></style></head><body><table id='t'><tr> <td class="img"></td> <td class="msg"> 5.5号</td></tr><tr> <td class="img"></td> <td class="msg"> 5.4号</td></tr><tr> <td class="img"></td> <td class="msg"> 5.3号</td></tr><tr> <td class="img"></td> <td class="msg"> 5.2号</td></tr><tr> <td class="img"></td> <td class="msg"> 5.1号</td></tr></table><input type='button' onclick='add()' value='add'/></body><script type='text/javascript'>function add(){ var tb = $('#t'); tb.find('tr:eq(0)').before($('<tr><td>111111</td><td>22222222</td></tr>'))} </script></html>
[解决办法]
<script type='text/javascript'>
function add()
{
$("tbody").prepend($('<tr><td>111111</td><td>22222222</td></tr>'));
}
</script>
[解决办法]
$("tbody tr:last").remove()
[解决办法]
div css overflow:hidden
插入div用before方法 OK了
[解决办法]
你应该设计成<li>的样式更加好
[解决办法]
服务端查询5条数据,按日期降序排序就可以了