針對表格操作，包括複製表格行，添加表格行，鍵盤上下左右鍵進行表格上每個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"> <p class="lead">點擊鍵盤<span class="auth-info">enter鍵</span>插入數據；&nbsp;點擊鍵盤<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>&nbsp;&nbsp;&nbsp;&nbsp;<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>插入數據；&nbsp;點擊鍵盤<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>&nbsp;&nbsp;&nbsp;&nbsp;<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>這幾個文件因爲代碼太多；如果貼上去的話估計大家也看不懂，所以我全部打包上傳到資源上了；大家可以去我的資源下載；下載後直接就可以看到效果！