jQuery(非HTML5)可編輯表格實現代碼
2024-05-06 14:20:34
供稿：網友
功能：
單擊單元格選中，選中過程中使用方向鍵更換選中的單元格，選中過程中按回車鍵或者直接雙擊單元格進入可編輯狀態，單元格失去焦點時保存修改的內容。
主要實現思路：
選中，移動選中區域等都是依靠jQuery強大的API進行實現的。而可編輯的單元格實際上是在選中單元格時，在單元格上面添加個input輸入域，動態的更新數據
源代碼：
HTML代碼：
代碼如下:
<table class="editableTable">
<thead>
<tr>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="editable simpleInput">arthinking</td>
<td class="editable simpleInput">Jason</td>
<td class="editable simpleInput">itzhai</td>
</tr>
<tr>
<td class="editable simpleInput">arthinking</td>
<td class="editable simpleInput">Jason</td>
<td class="editable simpleInput">itzhai</td>
</tr>
<tr>
<td class="editable simpleInput">arthinking</td>
<td class="editable simpleInput">Jason</td>
<td class="editable simpleInput">itzhai</td>
</tr>
</tbody>
</table>
CSS代碼：
代碼如下:
body{
text-shadow:#FFFFFF 1px 1px 1px;
}
.editableTable{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
.editableTable thead{
background:#FFFFCC;
}
td{
background:#66CCFF;
cursor:pointer;
}
.selectCell{
background:#6699FF;
}
JS代碼：
代碼如下:
var EdTable = function(){
// 給單元格綁定事件
function initBindGridEvent(){
$("td.editable").unbind();
// 添加單元格點擊事件
addGridClickEvent();
// 添加單元格雙擊事件
addGridDbClickEvent();
// 添加鍵盤事件
addGridKeyPressEvent();
}
// 給單元格添加單擊事件
function addGridClickEvent(){
$("td.simpleInput").bind("click",function(){
$('.simpleInput').each(function(){
$(this).removeClass("selectCell");
});
// 給選中的元素添加選中樣式
$(this).addClass("selectCell");
});
}
//給單元格添加雙擊事件
function addGridDbClickEvent(){
$("td.simpleInput").bind("dblclick",function(){
$('.simpleInput').each(function(){
$(this).removeClass("selectCell");
});
var val=$(this).html();
var width = $(this).css("width");
var height = $(this).css("height");
$(this).html("<input type='text' onblur='EdTable.saveEdit(this)' style='width:"+ width +";height:"+ height +"; padding:0px; margin:0px;' value='"+val+"' >");
$(this).children("input").select();
});
}
// 給單元格添加鍵盤事件
