Web开发之js技术经验介绍

柔情只为你懂 2022-06-16 11:26 193阅读 0赞

## 1.基础js技术集合 ##

### 1.1.js简单方法的调用范例集 ###

#### 运算类 ####

<table> 
 <tbody> 
 <tr> 
 <td> &lt;script&gt; //说明：以下采用简单函数function的封装，直接调用就可以显示结果，来简单说明js相关方法的使用。 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//testWriteln(); testSplit(); //testArray(); //方法split的使用，分割字符串 function testSplit(){ &nbsp; alert("aaa=bb".split("=")[0]);//显示结果：aaa &nbsp; alert("aa bb cc".split(""));//显示结果:a,a, ,b,b, ,c,c （参数""默认将字符串全部用,分割） &nbsp; alert("aa bb cc".split(" "));//显示结果:aa,bb,cc&nbsp; （参数" "默认将空格全部用,分割） &nbsp; alert("aalbblccldd".split("l"));//显示结果:aa,bb,cc,dd } //方法slice的用法，返回一个数组的一段。（仍为数组） function testslice(){ &nbsp; var arrs = "aa;bb;cc;".split(";"); &nbsp; var arrs1 = arrs.splice(0,arrs.length-1); &nbsp;&nbsp;alert(arrs1);//显示结果aa,bb,cc，去掉了最后一个元素; } //数组Array的使用,以及方法join的使用 function testArray(){ &nbsp; var testArr=Array(); &nbsp; testArr.push("aa");//数组的填值 &nbsp; testArr.push("bb"); &nbsp; testArr.push("cc"); &nbsp; alert(testArr[1]);//显示结果：bb &nbsp;alert(testArr.length);//显示结果：3（数组长度为3） &nbsp; var joinString1 = testArr.join();//将数组所有元素值连接起来，默认的连接符为, &nbsp; alert(joinString1);//显示结果：aa,bb,cc &nbsp; var joinString2 =testArr.join("-");//将数组所有元素值用-连接起来 &nbsp; alert(joinString2);//显示结果：aa-bb-cc } //方法indexOf的使用 function testIndexof(){ &nbsp; alert("aabbccdd".indexOf("b"));//显示结果:2 （b的位置为2） &nbsp; alert("aabbccdd".indexOf("e"));//显示结果:-1 （e没有找到,返回-1） } //日期函数的用法 function testDate(){ &nbsp; var now = new Date(); &nbsp; var time = now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate()+" "+now.getHours()+":"+now.getMinutes(); &nbsp; alert(time);//显示结果2012-06-20 11:26 } &nbsp;&lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

**页面类**

<table> 
 <tbody> 
 <tr> 
 <td> &lt;script type="text/javascript"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //页面跳转的用法- window.location.href='http://www.sina.com';&nbsp;//运行结果：页面将在本地转向新浪网址 //方法document.writeln的使用 document.write("write的使用:"+"&lt;br&gt;");//运行结果：输出write的使用，再换行 document.writeln("writeln的使用:");//运行结果：输出write的使用，再换行 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

## 2.jquery技术集合 ##

### 2.1.jquery的简单方法调用实例集 ###

<table> 
 <tbody> 
 <tr> 
 <td> ... &lt;script type="text/javascript" src="jquery-1.7.1.js"&gt;&lt;/script&gt;&lt;!-- 记得引入基本库jquery*.js啊--&gt; &lt;/HEAD&gt; &lt;BODY&gt; &nbsp;&lt;div&gt;&lt;span&gt;Hello&lt;/span&gt;&lt;/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &lt;p class="selected"&gt;Hello Again&lt;/p&gt; &nbsp; &lt;p&gt;And Again&lt;/p&gt; &lt;a href="#" name="testhref"&gt;test&lt;/a&gt; &lt;/BODY&gt; &lt;script&gt; //siblings的用法，实例:查找每个p元素的所有类名为"selected" 的所有同胞元素 jQuery("p").siblings(".selected").css("background", "yellow");//显示结果为："Hello Again"文本变为黄色 //找到一个元素(此处为链接testhref)，给它绑定一个click事件 jQuery("a[name='testhref']").bind('click', function() { &nbsp;&nbsp; alert("你被绑定了!") &nbsp; });//显示结果：点击链接'test'后，提示"你被绑定了!"。 jQuery(".selected").click(function(){//hover &nbsp;&nbsp;&nbsp;alert("我被点击了!")&nbsp;;&nbsp; })//显示结果：包含selected样式的元素点击时，会提示"我被点击了!"，其他还可加载许多事件如hover(鼠标移动经过&nbsp;时) &lt;/script&gt; </td> 
 </tr> 
 </tbody> 
</table>

### jquery的事件绑定与触发 ###

事件绑定：

$('\#listBtn').bind('click',function(event)\{  
   window.parent.frames\['mainMidFrame'\].$("\#searchForm")\[0\].submit();  
 \}) ;

事件触发：

$('\#listBtn').click();

### jquery实现弹出窗口保存信息后局部刷新父页面数据功能 ###

实现思路是：在父页面中用一个window变量保存打开弹出窗口的引用，并绑定这个window变量的close关闭事件中，用jquery调用父页面中的相应数据区域的刷新(查询)方法，这样就实现了在父页面中的局部刷新。例子代码如下：

<table> 
 <tbody> 
 <tr> 
 <td> //发送-快捷菜单 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery("#smsGroupSend").bind('click', function() { &nbsp;&nbsp;&nbsp;//取得弹出窗口引用的句柄 &nbsp;&nbsp;&nbsp; var window = new ZUI.WindowPanel({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: '发送短信', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 685, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height : 450, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; divId:'smsEntryGrid', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: '&lt;%=path%&gt;/smsEntry/showResendSms.do?sendSource=1'&nbsp; &nbsp;&nbsp;&nbsp; });//source短信来源：1客户关怀&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; window.show(); &nbsp;&nbsp;&nbsp; //绑定关闭时刷新父页面 &nbsp;&nbsp;&nbsp; window.on("close",function(){ &nbsp;&nbsp;jQuery.zuiGrid.load({ &nbsp;&nbsp;&nbsp;id : 'smsEntryGrid', //列表dom结点id &nbsp;&nbsp;&nbsp;url : ZUI.PATH + '/smsEntry/searchSmsEntryList.do', //请求数据的url &nbsp;&nbsp;&nbsp;pageConfig : { //分页参数，pageSize默认为10 &nbsp;&nbsp;&nbsp;&nbsp;hiddenName : 'page' //分页隐藏域的名称&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;});&nbsp;&nbsp;&nbsp; &nbsp;}) }) </td> 
 </tr> 
 </tbody> 
</table>

### jquery实现html表格table的操作 ###

**表格记录显示：**

方法1：表格行标识查找插入记录(克隆行方式)

<table> 
 <tbody> 
 <tr> 
 <td> jQuery.ajax({&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; type: "GET", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; contentType: "application/json; charset=utf-8", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: "&lt;%=path%&gt;/cluster/search?action="+actionArg, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dataType : "json", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; success: function(results)&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var msgs=results[0].msg;//取得结果集 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $.each(msgs, function(i, n){//循环取记录数据 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //alert(n.createTime); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var row = $("#tr_cluster").clone();//表格行标识的复制 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.find("#cluster_idc").html(msgs[i].idc); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.find("#cluster_code").html(msgs[i].code); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; row.appendTo("#table_listCluster");//添加到表标识模板的容器中 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; error: function(errmsg){//请求出错处理 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert("出现错误:"+errmsg); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } ... &lt;table id="table_listCluster" border="0" cellpadding="4" cellspacing="1" width="800" &gt; &nbsp; &lt;thead &gt; &nbsp;&nbsp;&nbsp; &lt;th align="center"&gt;IDC&lt;/th&gt; &nbsp;&nbsp;&nbsp; &lt;th align="center"&gt;集群编码&lt;/th&gt; &nbsp; &lt;/thead&gt; &lt;tr id="tr_cluster"&gt; &nbsp;&nbsp; &lt;td align="center"&gt;&lt;input name="clusterId" type="checkbox" value="" οnclick="choose()"&gt;&lt;/td&gt; &nbsp;&nbsp; &lt;td id="cluster_idc"&gt;&lt;/td&gt; &nbsp;&nbsp; &lt;td id="cluster_code"&gt;&lt;/td&gt; &nbsp; &lt;/tr&gt; &lt;/table&gt; </td> 
 </tr> 
 </tbody> 
</table>

评价：这种方式性能不是很高有比较多的dom查找，消耗性能。

方法2：使用行模板拼接html字符串插入表格

<table> 
 <tbody> 
 <tr> 
 <td> //增加归属行记录 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; function addOwnerRow(){ &nbsp;//alert("add") &nbsp;rowCount++;&nbsp; &nbsp;var rowTemplate ="&lt;tr class=tr_"+rowCount+"&gt;"+ &nbsp;&nbsp;&nbsp; "&lt;td&gt;归属&lt;INPUT TYPE='text' name='owner' &gt;&lt;input type='button' value='+' οnclick='addOwnerRow()'&gt;&lt;input type='button' value='-' οnclick='delOwnerRow()'&gt;&lt;/td&gt;"+ &nbsp;&nbsp;&nbsp; "&lt;/tr&gt;"; &nbsp;jQuery("#tbl_owners tbody").append(rowTemplate);&nbsp; } //删除归属行记录 function delOwnerRow(){ &nbsp; //alert("del") &nbsp; jQuery("#tbl_owners .tr_"+rowCount).remove(); &nbsp; rowCount--;&nbsp; &nbsp; }&nbsp; ... &lt;TABLE&gt; &lt;TR&gt; &nbsp;&lt;TD&gt;许可号&lt;INPUT TYPE="text" id="licenseId"&gt;&lt;/TD&gt; &nbsp;&lt;TD&gt;许可内容参数名&lt;INPUT TYPE="text" id="contentKey" value="maxOwners"&gt; &nbsp;&nbsp;&nbsp; &lt;INPUT TYPE="button" id="queryLicense" value="查询"&gt;&lt;INPUT TYPE="button" id="resetForm" value="重置"&gt; &nbsp;&lt;/TD&gt; &lt;/TR&gt; &lt;TR&gt; &nbsp;&lt;TD&gt;归属&lt;input type='button' value='+' οnclick='addOwnerRow()'&gt;&lt;/TD&gt; &nbsp;&lt;TD&gt;&lt;/TD&gt; &lt;/TR&gt; &lt;/TABLE&gt; </td> 
 </tr> 
 </tbody> 
</table>

**表格行点击变色**

<table> 
 <tbody> 
 <tr> 
 <td>方法1：用removeClass方法 需要先增加css样式 .detailinfo_list tbody tr.hilight{background: #99CCFF;} 然后再定义事件监听方法 $(".detailinfo_list tbody tr").live("click",function(evt){ &nbsp; &nbsp; &nbsp; &nbsp; $(".detailinfo_list tbody tr").removeClass('hilight'); $(this).addClass("hilight"); }); 方法2：用css方法 $(".detailinfo_list tbody tr").live("click",function(evt){ $(".detailinfo_list tbody tr").css("background",""); $(this).css("background","#99CCFF"); }); 这样就可以了，比较简便</td> 
 </tr> 
 </tbody> 
</table>

**表格行记录的上移、下移**：

<table> 
 <tbody> 
 <tr> 
 <td> //上移、下移排序 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function sort(sortType){ &nbsp; var check_employeeId = document.getElementsByName("employeeId");//这里是一个行记录的选中标识对应的字段 &nbsp; var icount=0; &nbsp; var data_tr;//移动目标 &nbsp; for(var i=0;i&lt;check_employeeId.length;i++){//循环行记录 &nbsp;&nbsp;&nbsp; if(check_employeeId[i].checked){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data_tr=jQuery(check_employeeId[i]).parent().parent();//移动目标赋值，取得选中字段项的父对象（tr行标识） &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; icount++;//统计选中的行记录 &nbsp;&nbsp;&nbsp; } &nbsp; } &nbsp; if(icount==0){ &nbsp;&nbsp;&nbsp; alert("请选择记录!"); &nbsp;&nbsp;&nbsp; return; &nbsp; }else if(icount&gt;1){ &nbsp;&nbsp;&nbsp; alert("一次只能操作一条记录!"); &nbsp;&nbsp;&nbsp; return; &nbsp; } &nbsp;&nbsp; &nbsp; if(sortType=='moveUp'){//上移 &nbsp;&nbsp;&nbsp; if(jQuery(data_tr).prev().html()==null){ //获取tr的前一个相同等级的元素是否为空 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("已经是最顶部了!"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; jQuery(data_tr).insertBefore(jQuery(data_tr).prev()); //将本身插入到目标tr的前面 &nbsp; }else if(sortType=='moveDown'){//下移 &nbsp;&nbsp;&nbsp; if(jQuery(data_tr).next().html()==null){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("已经是最低部了!"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return; &nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; jQuery(data_tr).insertAfter(jQuery(data_tr).next()); //将本身插入到目标tr的后面&nbsp; &nbsp; } &nbsp; //排序后重新取得employeeId值，传递给后端更新排序 &nbsp; var employeeAllIds="";//表格中所有的id组合串 &nbsp; check_employeeId = document.getElementsByName("employeeId"); &nbsp; for(var i=0;i&lt;check_employeeId.length;i++){ &nbsp;&nbsp;&nbsp; employeeAllIds += check_employeeId[i].value+',';//组装employeeIds &nbsp; } &nbsp; employeeAllIds =employeeAllIds.substring(0,employeeAllIds.length -1); //&nbsp; alert(employeeAllIds);&nbsp; return ; &nbsp; var orgId='&lt;%=request.getParameter("orgId")%&gt;'; //alert(orgId);return; &nbsp; if(orgId==null||orgId==''){ &nbsp;&nbsp;&nbsp; alert("当前机构不能为空！"); &nbsp;&nbsp;&nbsp; return; &nbsp; } &nbsp;&nbsp; jQuery(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var options = { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: "&lt;%=path%&gt;/emp/sortEmployeeInfo.do", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dataType : "json", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data: {employeeAllIds:employeeAllIds,orgId:orgId}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; success: function(responseText, statusText, xhr, $form)&nbsp; { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //alert("数据成功！"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; error: function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("出现错误,无满足条件的记录!"); &nbsp;&nbsp;&nbsp;//请求出错处理 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var form = jQuery('#listForm'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; form.ajaxSubmit(options); &nbsp;&nbsp;&nbsp; })//end jquery-function } </td> 
 </tr> 
 </tbody> 
</table>

### 列表框控件的使用 ###

<table> 
 <tbody> 
 <tr> 
 <td>//列表多选&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function allChoose(){ &nbsp; var ckA = document.getElementById("allcheckbox"); &nbsp; var ck =document.getElementsByName("employeeId"); &nbsp;if(ckA.checked==true){ &nbsp;&nbsp;for(var i=0; i&lt;ck.length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ck[i].checked=true;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;}else{ &nbsp;&nbsp;for(var i=0; i&lt;ck.length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ck[i].checked=false; &nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;} } function choose(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var ckA = document.getElementById("allcheckbox"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var ck =document.getElementsByName("employeeId"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(var i=0;i&lt;ck.length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(ck[i].checked==false){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ckA.checked=false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } }</td> 
 </tr> 
 </tbody> 
</table>