可编辑表格(Editable Table)
需求分析
1.单击table的每个cell后，给cell加上一个尺寸相当的input;
2.input后把value传给cell的innerHTML;
3.失焦后删除input。
HTML
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <link rel="stylesheet" type="text/css" href="css/table.css"/> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> <div class="container"> <table class="table" id="edit-table"> <caption><h2>Title</h2></caption> <thead> <tr> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> </tr> </thead> <tbody> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </tbody> </table> <ul class="pagination"> <li><a href="#">首页</a></li> <li><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">下一页</a></li> <li><a href="#">末页</a></li> </ul> </div> <script src="js/insert-input.js"></script> <script src="js/main.js"></script> </body> </html>
table.css
/*The pagination page style*/ html, body, dl, dd, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, optgroup, p, blockquote, figure, hr, menu, dir, thead, tbody, tfoot, th, td { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html{ font-size: 10px; font-family: sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ,'Microsoft Yahei', 微软雅黑; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; margin: 0; display:block; } table{ background-color: transparent; border-spacing: 0; border-collapse: collapse; border-radius:4px; table-layout:fixed; } caption{ padding-top: 8px; padding-bottom: 8px; padding-right: 15px; padding-left: 15px; color: #777; text-align: left; } th{ text-align: center; border-top: 0; } tr{ } td{ display:table-cell; padding:0; text-align: center; vertical-align:middle; } ul{ margin-top: 0; margin-bottom: 10px; } a { color: #337ab7; text-decoration: none; background-color: transparent; } h2{ font-size: 30px; } h1 ,h2 ,h3{ margin-top: 20px; margin-bottom: 10px; } h1, h2, h3, h4, h5, h6{ font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } /*div class*/ .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } /*table class*/ .table{ width: 100%; max-width: 100%; margin-bottom: 20px; } .table > thead > tr{ background-color: #FCFCFC; } .table > thead > tr > th{ border-bottom-width: 2px; border: 1px solid #ddd; padding: 5px; vertical-align: bottom; border-bottom: 2px solid #ddd; line-height: 1.42857143; } /*.table>tbody>tr:nth-of-type(odd){ background-color: #f9f9f9; }*/ .table > tbody > tr:hover{ background-color: #f5f5f5; } .table > tbody > tr > td{ border: 1px solid #ddd; padding: 5px; line-height: 1.42857143; vertical-align: middle; cursor:pointer; } .table > tbody > tr > td:hover{ background-color: #F5F5DC; } /*ul class*/ .pagination { display: block; padding-left: 0; margin: 20px 0; border-radius: 4px; float: right; } .pagination > li { display: inline; } .pagination > li > a{ position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #337ab7; text-decoration: none; background-color: #fff; border: 1px solid #ddd; } .pagination > li:first-child > a{ margin-left: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .pagination > li:last-child > a{ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .pagination > li > a:hover, .pagination > li > a:focus{ z-index: 3; color: #23527c; background-color: #eee; border-color: #ddd; } /*input class*/ .insert-edit-input{ display: inline; width: 100%; height: inherit; font-size: 14px; font-family:inherit; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }
insert-input.js
function editCell(event){ var currentCell; if(event == null){ currentCell = window.event.srcElement; }else{ currentCell = event.target; } if(currentCell.tagName.toLowerCase() == "td"){ var input = document.createElement("input"); input.type = "text"; input.setAttribute("class", "insert-edit-input"); input.value = currentCell.innerHTML; input.width = currentCell.style.width; input.onblur = function(){ currentCell.innerHTML = input.value; //currentCell.removeChild(input); input.remove(); }; input.onkeydown = function(event){ if(event.keyCode == 13){ input.blur(); } }; currentCell.innerHTML = ""; currentCell.appendChild(input); input.focus(); } } function setToEditable(tableid){ document.getElementById(tableid).ondblclick=editCell; //document.getElementById(tableid).onclick=editCell; }
main.js
$(document).ready(function(){ setToEditable('edit-table'); });
还有一种使用contentEditable属性来控制的方法
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <link rel="stylesheet" type="text/css" href="css/table.css"/> <script src="js/jquery-1.11.3.min.js"></script> </head> <body> <div class="container"> <table class="table" id="edit-table"> <caption><h2>Title</h2></caption> <thead> <tr> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> <th>Test</th> </tr> </thead> <tbody> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </tbody> </table> <ul class="pagination"> <li><a href="#">首页</a></li> <li><a href="#">上一页</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">下一页</a></li> <li><a href="#">末页</a></li> </ul> </div> <script> $(document).ready(function(){ var editCell = $("table#edit-table td"); editCell.each(function(index,element){ editCell.eq(index).click(function(){ editCell.eq(index).attr("contentEditable","true"); }); }); // var editCell = $("table#edit-table td"); // editCell.eq(0).click(function(){ // editCell.eq(0).attr("contentEditable","true"); // }); }); </script> </body> </html>
http://abruzzi.iteye.com/blog/299381
http://www.easyui.info/archives/623.html 使用easyUI插件
