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

最新推荐文章于 2021-05-30 20:04:16 发布

原创最新推荐文章于 2021-05-30 20:04:16 发布 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #firefox #ie #javascript #ViewUI

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种解决不同浏览器下表单内元素自动换行显示的问题，通过定义CSS样式和使用JavaScript判断浏览器类型来实现良好的用户体验。

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


<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正常。结合实际，通过如下代码实现。

[b]1、定义CSS样式[/b]

<style type="text/css">
.autoLineFeed{table-layout:fixed;word-wrap:break-word;}
.autoTD{word-break:break-all;}
</style>

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

<%--获取浏览器类型及版本--%>
<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>