td 自动换行 利用JS判断浏览器设置样式实现

showlike

[size=medium]页面代码如下：

<tr id="messageformtr" style="display:none">     <td><form action="" method="post" id="messageinfoform">     <table width="100%" cellspacing="0" cellpadding="0"border="0" bgcolor="#D5D5D5" id="sendInfoTable"><tr bgcolor="#FFFFFF"><Td width="20%" align="right">  选中的人：</Td><td width="70%" id="selectPeople">                                <span id="selectPeople"></span></td></tr></table></form>    </td></tr>

事先上面页面代码是隐藏的，当选择要发送信息的用户后，上面代码会显示，然后把用户的邮箱添加至ID为selectPeople的SPAN元素中，如果选择用户较多，则会把表格撑开，页面则出现滚动条，而表格不会换行显示，用户体验很差。通过设置表格TD CSS换行样式后，IE可以自动换行，但firefox不起作用，如果通过设置TABLE 样式，则反过来，IE把多余的数据隐藏，firefox正常。结合实际，通过如下代码实现。

1、定义CSS样式
<style type="text/css">.autoLineFeed{table-layout:fixed;word-wrap:break-word;}.autoTD{word-break:break-all;}</style>

2、因为页面代码是选择了用户后，才会显示，则通过JS代码判断当前浏览器类型，分别设置相应CSS样式实现自动换行功能

<%--获取浏览器类型及版本--%><script type="text/javascript">function getBrowser(){var Sys = {};var ua = navigator.userAgent.toLowerCase();var re =/(msie|firefox|chrome|opera|version).*?([\d.]+)/;var m = ua.match(re);Sys.browser = m[1].replace(/version/, "'safari");Sys.ver = m[2];return Sys;}<%--绑定监控浏览器类型并设置相应样式--%>$(function(){$("#sendInfo").click(function(){var showValue = $('#messageformtr').css('display');if(showValue == "block"){var sys = getBrowser();if(sys.browser=="msie"){$("#selectPeople").addClass("autoTD");}else{$("#sendInfoTable").addClass("autoLineFeed");}}});})</script>

注：sendInfo 为发送信息按钮ID，单击按钮就会显示上面页面代码。