jQuery(非HTML5)可編輯表格實現(xiàn)代碼
更新時間:2012年12月11日 09:34:41 作者:
單擊單元格選中,選中過程中使用方向鍵更換選中的單元格,選中過程中按回車鍵或者直接雙擊單元格進(jìn)入可編輯狀態(tài),單元格失去焦點時保存修改的內(nèi)容
功能:
單擊單元格選中,選中過程中使用方向鍵更換選中的單元格,選中過程中按回車鍵或者直接雙擊單元格進(jìn)入可編輯狀態(tài),單元格失去焦點時保存修改的內(nèi)容。
主要實現(xiàn)思路:
選中,移動選中區(qū)域等都是依靠jQuery強(qiáng)大的API進(jìn)行實現(xiàn)的。而可編輯的單元格實際上是在選中單元格時,在單元格上面添加個input輸入域,動態(tài)的更新數(shù)據(jù)
源代碼:
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();
});
}
// 給單元格添加鍵盤事件
function addGridKeyPressEvent(){
$(document).keyup(function(event){
if(event.keyCode == 37){
// 左箭頭
var selectCell = $(".selectCell").prev()[0];
if(selectCell != undefined){
$(".selectCell").removeClass("selectCell").prev().addClass("selectCell");
}
} else if(event.keyCode == 38){
// 上箭頭
var col = $(".selectCell").prevAll().length;
var topCell = $(".selectCell").parent("tr").prev().children()[col];
if(topCell != undefined){
$(".selectCell").removeClass("selectCell");
$(topCell).addClass("selectCell");
}
} else if(event.keyCode == 39){
// 右箭頭
var selectCell = $(".selectCell").next()[0];
if(selectCell != undefined){
$(".selectCell").removeClass("selectCell").next().addClass("selectCell");
}
} else if(event.keyCode == 40){
// 下箭頭
var col = $(".selectCell").prevAll().length;
var topCell = $(".selectCell").parent("tr").next().children()[col];
if(topCell != undefined){
$(".selectCell").removeClass("selectCell");
$(topCell).addClass("selectCell");
}
} else if(event.keyCode == 13){
// 回車鍵
var selectCell = $(".selectCell")[0];
if(selectCell != undefined){
$(selectCell).dblclick();
}
}
});
}
// 單元格失去焦點后保存表格信息
function saveEdit(gridCell){
var pnt=$(gridCell).parent();
$(pnt).html($(gridCell).attr("value"));
$(gridCell).remove();
}
return{
initBindGridEvent : initBindGridEvent,
saveEdit : saveEdit
}
}();
源代碼下載:
EditableTable.rar
單擊單元格選中,選中過程中使用方向鍵更換選中的單元格,選中過程中按回車鍵或者直接雙擊單元格進(jìn)入可編輯狀態(tài),單元格失去焦點時保存修改的內(nèi)容。
主要實現(xiàn)思路:
選中,移動選中區(qū)域等都是依靠jQuery強(qiáng)大的API進(jìn)行實現(xiàn)的。而可編輯的單元格實際上是在選中單元格時,在單元格上面添加個input輸入域,動態(tài)的更新數(shù)據(jù)
源代碼:
HTML代碼:
復(fù)制代碼 代碼如下:
<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代碼:
復(fù)制代碼 代碼如下:
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代碼:
復(fù)制代碼 代碼如下:
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();
});
}
// 給單元格添加鍵盤事件
function addGridKeyPressEvent(){
$(document).keyup(function(event){
if(event.keyCode == 37){
// 左箭頭
var selectCell = $(".selectCell").prev()[0];
if(selectCell != undefined){
$(".selectCell").removeClass("selectCell").prev().addClass("selectCell");
}
} else if(event.keyCode == 38){
// 上箭頭
var col = $(".selectCell").prevAll().length;
var topCell = $(".selectCell").parent("tr").prev().children()[col];
if(topCell != undefined){
$(".selectCell").removeClass("selectCell");
$(topCell).addClass("selectCell");
}
} else if(event.keyCode == 39){
// 右箭頭
var selectCell = $(".selectCell").next()[0];
if(selectCell != undefined){
$(".selectCell").removeClass("selectCell").next().addClass("selectCell");
}
} else if(event.keyCode == 40){
// 下箭頭
var col = $(".selectCell").prevAll().length;
var topCell = $(".selectCell").parent("tr").next().children()[col];
if(topCell != undefined){
$(".selectCell").removeClass("selectCell");
$(topCell).addClass("selectCell");
}
} else if(event.keyCode == 13){
// 回車鍵
var selectCell = $(".selectCell")[0];
if(selectCell != undefined){
$(selectCell).dblclick();
}
}
});
}
// 單元格失去焦點后保存表格信息
function saveEdit(gridCell){
var pnt=$(gridCell).parent();
$(pnt).html($(gridCell).attr("value"));
$(gridCell).remove();
}
return{
initBindGridEvent : initBindGridEvent,
saveEdit : saveEdit
}
}();
源代碼下載:
EditableTable.rar
您可能感興趣的文章:
- jQuery實現(xiàn)可編輯表格并生成json結(jié)果(實例代碼)
- jQuery 實現(xiàn)雙擊編輯表格功能
- jQuery實現(xiàn)的可編輯表格完整實例
- 基于Bootstrap使用jQuery實現(xiàn)簡單可編輯表格
- BootStrap和jQuery相結(jié)合實現(xiàn)可編輯表格
- jQuery+PHP實現(xiàn)可編輯表格字段內(nèi)容并實時保存
- 用Jquery實現(xiàn)可編輯表格并用AJAX提交到服務(wù)器修改數(shù)據(jù)
- jQuery一步一步實現(xiàn)跨瀏覽器的可編輯表格,支持IE、Firefox、Safari、Chrome、Opera
- 基于jQuery實現(xiàn)可編輯的表格
相關(guān)文章
jQuery擴(kuò)展方法實現(xiàn)Form表單與Json互相轉(zhuǎn)換的實例代碼
本文通過實例代碼給大家介紹了jQuery擴(kuò)展方法實現(xiàn)Form表單與Json互相轉(zhuǎn)換的相關(guān)知識,并給大家介紹了jquery兩種擴(kuò)展方法,需要的朋友可以參考下2018-09-09jquery+json實現(xiàn)數(shù)據(jù)二級聯(lián)動的方法
這篇文章主要介紹了jquery+json實現(xiàn)數(shù)據(jù)二級聯(lián)動的方法,涉及jQuery基于get方法與后臺.net程序傳輸json交互實現(xiàn)二級聯(lián)動菜單,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11基于jQuery的投票系統(tǒng)顯示結(jié)果插件
投票系統(tǒng)是網(wǎng)站中十分常見的系統(tǒng),顯示結(jié)果也是十分常見的。最近因為項目需要開發(fā)了一個投票結(jié)果顯示jQuery插件。2011-08-08jQuery實現(xiàn)點擊旋轉(zhuǎn),再點擊恢復(fù)初始狀態(tài)動畫效果示例
這篇文章主要介紹了jQuery實現(xiàn)點擊旋轉(zhuǎn),再點擊恢復(fù)初始狀態(tài)動畫效果,結(jié)合實例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-12-12