记录切换功能研究实现

最新推荐文章于 2024-12-12 18:38:51 发布

原创最新推荐文章于 2024-12-12 18:38:51 发布 · 471 阅读

0 ·

CC 4.0 BY-SA版权

专题剖析专栏收录该内容

20 篇文章

订阅专栏

以下代码只在Chrome浏览器中生效

页面切换功能

<span style="color:#000000;">         /* ----------------------向右转移一条记录 ----------------------*/
        /*注：1.chkItem为列表中checkbox的name
              2.right为目标列表的id号
              3.注意引用jquey 1.9.min.js
        */
        function oneToRight()
                           {
		  		moveOneR('chkItem');
		            }
		   function moveOneR(ckb){
		     //获取选中的复选框，然后循环遍历删除
		     var ckbs=$("input[name="+ckb+"]:checked");
		     if(ckbs.size()==0){
		        alert("请选中需要转移的记录！");
		        return;
		     }
		     if(ckbs.size()>1){
		        alert("只能选中一行！");
		        return;
		     }
		     ckbs.each(function(){
		            $(this).parent().parent().clone(true).appendTo("#rightPage");//此时的this是指td中的内容，这条语句将记录向左边复制
		            $(this).parent().parent().remove();//删除该条数据记录
		         });
		 	 }
		  /* ----------------------向右转移一条记录 ----------------------*/</span>

实例图

按钮全选功能

	      /* ------------ ---------- 全选所有记录和取消全选所有记录---------------*/	
<pre name="code" class="javascript">      /* ---------------------- 1.add_selectAll为全选按钮
                                2.chkItem为checkbox的name---------------*/

function allCheck(){ $("#add_selectAll").bind("click", function () 
{if($('input[name=add_selectAll]').is(':checked')) 
{ $("[name = chkItem]:checkbox").attr("checked", true); }
 else { $("[name = chkItem]:checkbox").attr("checked", false);
 } });}

最佳实例：

代码：

<html>
<head>
	<script type="text/javascript" src="C:\Users\Administrator.USER1-PC\Desktop\js\jquery-1.9.1.min.js">
	</script>
	<script type="text/javascript">
		function add(){
			document.getElementById("add").style.display ="block";
		}
		 function delTr(ckb){
			 alert(1);
			//获取选中的复选框，然后循环遍历删除
			var ckbs=$("input[name="+ckb+"]:checked");
			if(ckbs.size()==0){
				alert("要删除指定行，需选中要删除的行！");
				return;
			 }
			 if(ckbs.size()>1){
				alert("要删除指定行，需选中要删除的行！");
				return;
			}
			ckbs.each(function(){
				$(this).parent().parent().clone(true).appendTo("#rightList");//将记录左移
				$(this).parent().parent().remove();	//删除右边记录
			 });
		 }
		function oneToRight(){
			 delTr('checkItem');
		}
	</script>
	<style type="text/css">
		#add{
		width:800px;
		height:120px;
		background-color:#F0FFFF;
		display:none;
		position:relative;
		}
		#left{
		float:left;
		}
	</style>
	<title>切换界面</title>
</head>
<body>
	<h2>新增测试</h2>
	<div>
		<input value="新增" type="button" onclick="add()"/>
	</div>
	<div id="add">
		<table>
		<tr>
			<td>
						<div id="left">
			<table border="1px">
				<tr >
					<td width="20px">
					<input type="checkbox" name="checkItem" />
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
				</tr>
					<tr >
					<td width="20px">
					<input type="checkbox" name="checkItem" />
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
				</tr>
					<tr >
					<td width="20px">
					<input type="checkbox" name="checkItem"/>
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
				</tr>
					<tr >
					<td width="20px">
					<input type="checkbox" name="checkItem"/>
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
					<td width="20px">
					3
					</td>
				</tr>
			</table>
		</div>
			</td>
			<td>
		<div >
			<table>
				<tr height="20%">
				
				</tr>
				<tr height="15%">
					<input type="button" value=">" onclick="oneToRight()"/>
				</tr>
				<br/>
				<tr height="15%">
					<input type="button" value="»"/>
				</tr>
				<br/>
				<tr height="15%">
					<input type="button" value="«"/>
				</tr>
				<br/>
				<tr height="15%">
					<input type="button" value="<"/>
				</tr>
				<br/>
				<tr height="20%">
				</tr>
			</table>
		</div>
			</td>
			<td>
				<div id="right">
				<table border="1px" id="rightList">

				</table>
				</div>
			</td>
		</tr>
		</table>
	
	</div>
</body>
</html>

注：要引入jQuery库

前端基础」

1.table tr高度自适应问题一个table设置1000px高里面的有3个tr 是30像素高但是tr还是会自适应table，怎么才能设置tr 30px的高啊：对table不设置高度，修改td的高度即可

2.表头固定

http://zhidao.baidu.com/link?url=YxWobAGPu6CgPIYl4jh-CcMajwrNYs8ORHyn-0nDVvs5_mq8ZFu-kOPh8hjtvWI_GjzHqlj0uPLXEnVx5A4BrK

<td valign="top" >
  <table>
  </table>
</td>

记录切换功能研究实现

最佳实例：

前端基础」

1.table tr高度自适应问题 一个table设置1000px高 里面的有3个tr 是30像素高 但是tr还是会自适应table， 怎么才能设置tr 30px的高啊：对table不设置高度，修改td的高度即可

2.表头固定

http://zhidao.baidu.com/link?url=YxWobAGPu6CgPIYl4jh-CcMajwrNYs8ORHyn-0nDVvs5_mq8ZFu-kOPh8hjtvWI_GjzHqlj0uPLXEnVx5A4BrK <td valign="top" > <table> </table> </td>

1.table tr高度自适应问题一个table设置1000px高里面的有3个tr 是30像素高但是tr还是会自适应table，怎么才能设置tr 30px的高啊：对table不设置高度，修改td的高度即可

http://zhidao.baidu.com/link?url=YxWobAGPu6CgPIYl4jh-CcMajwrNYs8ORHyn-0nDVvs5_mq8ZFu-kOPh8hjtvWI_GjzHqlj0uPLXEnVx5A4BrK
<td valign="top" > <table> </table> </td>