记录切换功能研究实现

来源：互联网发布：上网流量控制软件编辑：程序博客网时间：2024/05/16 05:55

以下代码只在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>

0 0

记录切换功能研究实现

最佳实例：

前端基础」

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>