针对表格操作，包括复制表格行，添加表格行，键盘上下左右键进行表格上每个td的上下左右切换；支持火狐 谷歌 ie等浏览器

最近项目中需要针对表格添加复制行，而且要求上下左右键盘操作表格，并且表格每一列都有一个搜索按钮，当鼠标输入内容时实时搜索，在下拉的搜索内容中还可以用键盘进行上下选择内容填入相应input中所以我研究了一下 写出了下面的效果，仅此借鉴给你们，经过我本人测试兼容ie火狐谷歌等大众浏览器；如果你们有什么问题尽管提出来，我会修改并一一解答，下面贴代码：html代码：<div class="layer-content-warp" style="margin-top:-15px;">   <div class="page-tabs-warp" id="tab" style="margin:0px 20px 0px 20px;">      <ul class="page-tabs">      <li class="selected" id="accAuth"><a>表格一</a></li>      <li id="resAuth"><a>表格二</a></li> </ul> </div> <div class="layer-content" style="padding-top:0px;"> <div class="auth-content" style="overflow: visible;margin-top:0px;"> <div id="authAuth" style="display:none;" data-type="accAuth"></div> <div class="auth-list" id="tabCon"> <div class="user_acc" id="userAccAuth"> <div class="auth-detail">
1e378
<p class="lead">点击键盘<span class="auth-info">enter键</span>插入数据； 点击键盘<span class="auth-info">上下左右方向键</span>可切换选中节点；上下键切换快捷搜索所展示的内容enter键填入信息</p> </div>            <div style="border:#add667 1px solid;height:auto;">              <h1 style="background-color:#bce379;border-bottom:#add667 1px solid; height:28px;line-height:28px;font-size:14px;font-weight:bold;text-align:left; padding-left:10px;color:#fff;">表格一 <input id="addTr_button" type="button" name="button" value="添加行" onclick="addRows();"/>  </span> </h1>              <div class="setDisplay"> <table id="authDataGrid" class="table" cellspacing="0" width="100%" style="margin-bottom:0px;">                   <thead>                     <tr role="row"> <th class="authTh borderLeftNone" >第一列</th>                       <th class="authTh" >第二列</th>                       <th class="authTh" >开始时间</th>                       <th class="authTh" >结束时间</th>                       <th class="authTh borderRightNone" style="width: 150px;">操作</th>                     </tr>                   </thead>                   <tbody>                     <tr role="row" class="odd" id="row1_0">                       <td id="td1_0" class="tableTdList borderLeftNone sorting_1">                         <input class="authInput" id="userName_0" name="user" data-id="" type="text" value="" onclick=this.select()>                         <span class="copy_btn" onclick="userList(this)" ><i class="fa fa-search" title="精确搜索添加" ></i></span> </td>                       <td id="td1_1" class="tableTdList"> <input class="authInput" id="accName_0" name="accName_0" data-id="" type="text" value="" onclick=this.select()> <span class="copy_btn" onclick="accList(this)"><i class="fa fa-search" title="精确搜索添加" ></i></span>                       </td>                       <td id="td1_2" class="tableTdList"> <input class="authInput" id="accStartTime_0" name="accStartTime_0" data-id="" type="text" onclick=this.select()> </td> <td id="td1_3" class="tableTdList"> <input class="authInput" id="accEndTime_0" name="accEndTime_0" data-id="" type="text" onclick=this.select()> </td> <td class="optionBtn borderRightNone"> <a class="copyBtn" onclick="copyRows(this);">复制</a>    <a class="delBtn" onclick="deleteRows(this);">删除</a></td> </tr> <tr id="row_add"><td colspan="6" style="padding-left:0px;border:none;"></td></tr> </tbody> </table> </div> </div> </div> <div class="user_res" id="userResAuth" style="display:none;"> <div class="auth-detail"> <p class="lead"><可通过在各个节点上输入信息查找所要信息，点击键盘<span class="auth-info">enter键</span>插入数据； 点击键盘<span class="auth-info">上下左右方向键</span>可切换选中节点；上下键切换快捷搜索所展示的内容enter键填入信息</p> </div> <div style="border:#5cce94 1px solid;height:auto;"> <h1 style="background-color:#82dfb0;border-bottom:#5cce94 1px solid; height:28px;line-height:28px;font-size:14px;font-weight:bold;text-align:left; padding-left:10px;color:#fff;">表格二 <span class="addBut"> <input id="addResTr_button" type="button" name="button" value="添加行" onclick="addRowsRes();"/>  </span> </h1> <div class="setDisplay"> <table id="authDataGrid1" class="table" cellspacing="0" width="100%" style="margin-bottom:0px;"> <thead>                     <tr role="row">                       <th class="authTh borderLeftNone" >第一列</th> <th class="authTh" >第二列</th> <th class="authTh" >开始时间</th>                       <th class="authTh" >结束时间</th> <th class="authTh borderRightNone" style="width: 150px;">操作</th>                     </tr>                   </thead>                   <tbody>                     <tr role="row" class="odd" id="row2_0"> <td id="td2_0" class="tableTdList borderLeftNone sorting_1"> <input class="authInput" id="resUserName_0" name="resUserName_0" data-id="" type="text" value="" onclick=this.select()> <span class="copy_btn" onclick="resList(this)"><i class="fa fa-search" title="精确搜索添加" ></i></span> </td>                       <td id="td2_1" class="tableTdList"> <input class="authInput" id="resourceName_0" name="resourceName_0" data-id="" type="text" value="" onclick=this.select()> <span class="copy_btn" onclick="resResList(this)"><i class="fa fa-search" title="精确搜索添加" ></i></span> </td> <td id="td2_2" class="tableTdList"> <input class="authInput" id="resStartTime_0" name="resStartTime_0" data-id="" type="text" onclick=this.select()> </td>                       <td id="td2_3" class="tableTdList">                         <input class="authInput" id="resEndTime_0" name="resEndTime_0" data-id="" type="text" onclick=this.select()> </td>                       <td class="optionBtn borderRightNone"> <a class="copyBtn" onclick="copyRowsRes(this);">复制</a>    <a class="delBtn" onclick="deleteRowsRes(this);">删除</a> </td>                     </tr>                     <tr id="row_add"><td colspan="6" style="padding-left:0px;border:none;"></td></tr> </tbody> </table> </div>            </div> </div> </div> </div> </div></div>js代码：
<script type="text/javascript" language="JavaScript" src="js/auth_acc.js"></script><script type="text/javascript" language="JavaScript" src="js/auth_res.js"></script><script type="text/javascript" language="JavaScript" src="js/manager.js"></script><script>   $("#tab li").on("click",function(){      var thisIndex = $("#tab li").index(this);      if( $(this).text()=="表格一" ){         $("#authAuth").attr("data-type","accAuth");      }else if( $(this).text()=="表格二" ){         $("#authAuth").attr("data-type","resAuth");      }      $(this).addClass("selected").siblings().removeClass("selected");      $("#tabCon > div").eq(thisIndex).show().siblings().hide();      $("#tabCon > div").eq(thisIndex).find("input").removeAttr("disabled",true);         $("#tabCon > div").eq(thisIndex).siblings().find("input").attr("disabled",true);     }) </script><script type="text/javascript">   // 表格一 var rowUtil = new RowCopyUtility(         {            tableId: "authDataGrid",            rowGroupNumber: 1,            buttonHandlers: {               "Copy": "copyRows",               "Delete": "deleteRows"}       }   );   function addRows() {      rowUtil.addRow(0, false);   }   function copyRows(idx) {      idx = idx.parentNode.parentNode.id.split("_")[1];      rowUtil.copyRow(idx);   }   function deleteRows(idx) {      idx = idx.parentNode.parentNode.id.split("_")[1];      rowUtil.deleteRow(idx);   }      // 表格二 var rowUtilRes = new RowCopyUtilityRes({ tableId: "authDataGrid1", rowGroupNumber: 1, buttonHandlers: { "Copy": "copyRowsRes", "Delete": "deleteRowsRes"} } ); function addRowsRes() { rowUtilRes.addRowRes(0, false); } function copyRowsRes(idx) { idx = idx.parentNode.parentNode.id.split("_")[1]; rowUtilRes.copyRowRes(idx); } function deleteRowsRes(idx) { idx = idx.parentNode.parentNode.id.split("_")[1]; rowUtilRes.deleteRowRes(idx); } </script>最后<script type="text/javascript" language="JavaScript" src="js/auth_acc.js"></script>
<script type="text/javascript" language="JavaScript" src="js/auth_res.js"></script>
<script type="text/javascript" language="JavaScript" src="js/manager.js"></script>这几个文件因为代码太多；如果贴上去的话估计大家也看不懂，所以我全部打包上传到资源上了；大家可以去我的资源下载；下载后直接就可以看到效果！