问题描述
代码中加//*****************的按钮实现删除该行的作用varcountPage;varnowPag=1;varpageSize;varcountSize;varstarIndex;varendIndex;//用户提交信息varname;varsex;varage;//定义行号varnum=1;$(document).ready(function(){//注册添加用户的事件$("#submit").click(function(){//获取用户提交的信息name=$("#name").val();sex=$("input[name='sex']:checked").val();age=$("#age").val();pageSize=$("#selectSizeoption:selected").val();//alert(name+sex+age+pageSize);//创建表格下的tr对象$tr=$("<trclass='data'></tr>");$td1=$("<td></td>");$td2=$("<td></td>");$td3=$("<td></td>");$td4=$("<td></td>");$td5=$("<td></td>");$tr.append($td1.append("<inputtype='checkbox'>"));$tr.append($td2.append(name));$tr.append($td3.append(sex));$tr.append($td4.append(age));$tr.append($td5.append("<inputtype='button'value='删除'onclick='pNation()'>"));//*****************$("#show").append($tr);pageNation();});//注册选择显示条数的操作$("#selectSize").change(function(){pageSize=$("#selectSizeoption:selected").val();pageNation();});//注册分页操作的按钮点击事件$("#first").click(pageNation);$("#back").click(pageNation);$("#next").click(pageNation);$("#last").click(pageNation);});functionpNation(){//*****************$("tabletd").click(function(){varrow=$(this).parent().index()+1;//行位置alert("当前位置：第"+row+"行")});//$(row_id).remove();}//分页操作的函数varpageNation=function(){//获取所有的数据条数countSize=$("#showtr").size();//获取总页数countPage=Math.ceil(countSize/pageSize);//处理翻页的操作if(this.nodeType==1){varidValue=$(this).attr("id");if("first"==idValue){//alert(idValue);nowPag=1;}elseif("back"==idValue){//alert(nowPag);if(nowPag>1){nowPag--;}}elseif("next"==idValue){//alert(idValue);if(nowPag<countPage){nowPag++;}}elseif("last"==idValue){//alert(idValue);nowPag=countPage;}}//alert(pageSize);//获取显示开始和结束的下标starIndex=(nowPag-1)*pageSize+1;endIndex=nowPag*pageSize;if(endIndex>countSize){//alert("下标大于总记录数"+endIndex);endIndex=countSize;}if(countSize<pageSize){//alert("总记录数小小于每页的显示条数"+endIndex);endIndex=countSize;}//alert(starIndex);if(starIndex==endIndex){//显示的操作$("#showtr:eq("+(starIndex-1)+")").show();$("#showtr:lt("+(starIndex-1)+")").hide();}else{//显示的操作$("#showtr:gt("+(starIndex-1)+")").show();$("#showtr:lt("+(endIndex-1)+")").show();//隐藏的操作$("#showtr:lt("+(starIndex-1)+")").hide();$("#showtr:gt("+(endIndex-1)+")").hide();}//改变底部显示操作$("#sizeInfo").html("当前从"+starIndex+"条到第"+endIndex+"条记录,共"+countSize+"条记录.");$("#pageInfo").html("当前是第"+nowPag+"页,共"+countPage+"页.");};
解决方案
解决方案二：
学一种把js代码跟html代码分离的前端框架，可以更快更完整地看清UI模板，也可以解决许多javascript方面的诡异问题。
解决方案三：
你可以看到，首先，html模板一目瞭让，不跟javascript大片代码纠结在一起。然后，最主要地，mvvm模式下你要操作界面，那么直接用非常轻灵的几条语句，那ViewModel数据稍微修改一下（例如addGift、removeGift等，只跟数据打交道），界面就自动改变了。使用mvvm编程模式，你用不着到pNation中去纠结于DOM，就干净且方便了。