本文总结了前端开发中遇到的一些典型问题及其解决方案，包括固定表头的实现、从表格中获取第一列数据、编辑记录时传递当前值、JavaScript中数值比较的陷阱、事件处理函数的return用法、动态生成导航菜单、div根据表格记录数调整、checkbox全选功能，以及history.go()和History.back()的差异。这些内容有助于提升前端开发者在实际工作中的效率。
前端界面问题及解决方案总结
1.固定表头
将表头和数据列表放入两个div中去；
<span style="font-size:18px;color:#FF0000;"><strong><td valign="top"></strong><!--列表垂直分布显示--></span>
<!--固定表头-->
<span style="color:#FF0000;">
<span style="font-size:18px;color:#FF6666;"><strong><div style="width:320px;height:30px;"></strong></span>
<table width="100%" cellspacing="1" cellpadding="1" border="0" style="table-layout: fixed; ">
<tbody>
<tr style="background-color:#ADD8E6;" >
<td align="center">
页面ID
</td>
<td align="center">
页面名
</td>
<td align="center" width="20%">
<input type="checkbox" id="add_selectAll" name="add_selectAll" onchange="allCheck_add();"/>
</td>
</tr>
</table>
<span style="color:#FF0000;"><span style="font-size:24px;"></div></span>
</span></span>
<!--数据列表项-->
<span style="color:#330000;"><div style="overflow-y:auto;width:320px;height:250px;" >
<table id="edit_rightPage" width="100%" cellspacing="1" cellpadding="1" border="0" style="table-layout: fixed; ">
<tbody>
<s:iterator value="unavailable" status="status" var="unavailable">
<tr class="<s:if test="#status.odd">bk_data_white</s:if><s:else>bk_data_gray</s:else>">
<td height="5%">
${i_page_id}
</td>
<td>
${i_page_name}
</td>
<td align="center">
<input type="checkbox" id="add_role" name="chkItem" />
</td>
</tr>
</s:iterator>
</tbody>
</table>
</div></span>
</td>
2.获取数据表格中第一列的值
/* --------------------获取可用列表的第一列i_page_id的值---------------- */
function getI_page_ids(){
var content;
$("#rightPage tr").each(function(){
var firstVal=$(this).children("td:first").html()<span style="font-size:24px;"><strong>.trim()</strong></span>;
if(isString(firstVal))
content +=firstVal + ",";
});
/* 将获取的ids传入后台 */
$("#addForm").attr("action", "${pageContext.request.contextPath}/role_addSave.action<span style="font-size:24px;color:#FF0000;">?i_page_ids="+content</span>).submit();
}
/* --------------------获取可用列表的第一列i_page_id的值---------------- */3.编辑记录时传入当前记录的值
<a href="#" onclick="showEditUI('${i_code}','${i_flag}','${i_property1}','${i_property2}');" >编辑</a>
function showEditUI(i_code,i_flag,i_property1,i_property2){
document.getElementById("edit_i_code")<span style="font-size:24px;color:#FF0000;"><strong>.value</strong></span>=i_code;
var selects = document.getElementsByName("edit_i_flag");
for (var i=0; i<selects.length; i++){
if (selects[i].value==i_flag) {
selects[i].checked= true;
break;
}
}
document.getElementById("edit_i_property1").value=i_property1;
document.getElementById("edit_i_property2").value=i_property2;
$("font.message").empty();
var objDiv = document.getElementById("editUI");
objDiv.style.top = "0px";//设置弹出层距离上边界的距离
objDiv.style.left = "200px";//设置弹出层距离左边界的距离
objDiv.style.width = "400px";//设置弹出层的宽度
objDiv.style.height = "220px";//设置弹出层的高度
objDiv.style.visibility = "visible";
var objMask = document.getElementById("fullMask");
objMask.style.height = "600px";
objMask.style.width = "1165px";
objDiv.style.display = "block";
objMask.style.visibility = "visible";
}注：这里要搞清楚.value和.innerHTML的使用背景
4.js做大小比较时警惕对象类型
通过js获取页面两个数字输入框的值，并对其进行大小比较。此时出来的结果可能让你迷惑不解，例如代码：
假如input1中输入10，input2中输入2。10肯定是大于2的，所以上面的alert框应该弹出true，但实际上给出的是false。原因何在？对应数字10大于2是毫无疑问的，如果是作为字符串比较，那么结果刚好相反。而上述从页面获取值得到的类型是String。
如果明确是要进行数字比较，则需要显示的转化为数字，例如使用parseInt、parseFloat；还有一种方法是使用减法运算符，如：v1 – v2 > 0，此时js在运算前内部会进行类型转换。
另外由于加法运算符同时支持数字和字符串，使用这个时候也要小心。例如 a + b ,如果其中一个是字符串类型，一个是数字类型，在执行运算前会把另外一个转化为字符串类型，所以实际是进行字符串链接操作，而不是想要的算术运算。在确定是要做算术运算的情况下，对于未知类型的参数，保险的情况下还是使用parseInt进行类型转换。
5.onclick="return check()"和onclick="check()"区别
JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。而该值决定了当前操作是否继续。
当返回的是true时，将继续操作。
当返回是false时，将中断操作。
而直接执行时（不用return）。将不会对window.event.returnvalue进行设置
所以会默认地继续执行操作
详细说明如下：
例如：
当在 <a href="abc.htm" onclick="return add_onclick()">Open</a> 中
如果函数 add_onclick() 返回 true, 那么 页面就会打开 abc.htm
否则, (返回 false), 那么页面不会跳转到 abc.htm, 只会执行你的 add_onclick() 函数里的内容. (add_onclick函数中控制页面转到 abc.htm除外
)
而 <a href="abc.htm" onclick="add_onclick()">Open</a>
不管 add_onclick() 返回什么值, 都会在执行完 add_onclick 后打开页面 abc.htm
另外补充：
onclick事件时就相当于onclick="return true/false"
例：
function check()
{
if(obj.value=="" )
{
window.alert("不能为空！");
obj.focus();
return false;
}
return true;
}调用方法返回true时才提交表单，反之则不提交，这是submit按钮
6.通过数据库生成导航菜单
function LoadMenu(){
$.ajax({
type: 'get',
url:'${pageContext.request.contextPath}/homepage_getMenu.action',
data:{"i_user_id":"${i_user_id}"},
datatype: "json",
async: false,
cache:false,
success: function (data) {
var j=$.parseJSON(data);
var mList=j.obj;
var root=document.getElementById("menu");
for(var i=0;i<mList.length;i++){
//添加一级菜单
var li=document.createElement("li");
var a=document.createElement("a");
a.href=mList[i].url;
a.innerHTML=mList[i].text;
if(mList[i].text!="退出") a.target="mainFrame";
li.appendChild(a);
root.appendChild(li);
//添加二级菜单
var submenu=mList[i].children;
if(submenu!=null){
for(var k=0;k<submenu.length;k++){
var ul2=document.createElement("ul");
var li2=document.createElement("li");
var a2=document.createElement("a");
a2.href=submenu[k].url;
a2.innerHTML=submenu[k].text;
a2.target="mainFrame";
li2.appendChild(a2);
ul2.appendChild(li2);
li.appendChild(ul2);
}
}
}
},
error : function(XMLHttpRequest,textStatus,errorThrown) {
alert('getMenu error!');
}
});
};7.div随着表格中的记录数的变动而变动
<span style="font-size:24px;"> .fixed_div{position:fixed;left:200px;bottom:20px;width:400px;}</span>8.对指定table中的checkbox全选
<script src="jquery-1.6.2.min.js"></script>
<input type="checkbox" id="ckAll" />check all<br />
<input type="checkbox" name="sub" />1<br />
<input type="checkbox" name="sub"/>2<br />
<input type="checkbox" name="sub"/>3<br />
<input type="checkbox" name="sub"/>4<br />
<script>
$(function(){
//全选 <pre name="code" class="javascript"> $("#ckAll").click(function() {
$("#rightPage input[name='sub']").prop("checked", this.checked);
});
//当子项全部被选中的时候，表头项也自动被选中
$("#rightPage input[name='sub']").click(function() {
var $subs = $("#rightPage input[name='sub']");
$("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
}); });</script>
//1.注意ckAll为表头的id，然后jQuery的版本是最新的，采用了其中的prop方法。
//2.注意$("#rightPage input[name='sub']").prop("checked", this.checked);中的this.checked的状态，以及#rightPage为指定table的id<pre name="code" class="javascript">
原文链接：http://www.oschina.net/code/snippet_119416_5689
9.javascript:history.go()和History.back()的区别
原文链接：http://www.cnblogs.com/yuanyuan/archive/2010/01/12/1645297.html
扫一扫
987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
