需求分析
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>Titleh2>caption>
<thead>
<tr>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
tr>
thead>
<tbody>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
tbody>
table>
<ul class="pagination">
<li><a href="#">首页a>li>
<li><a href="#">上一页a>li>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>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).οnclick=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>Titleh2>caption>
<thead>
<tr>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
<th>Testth>
tr>
thead>
<tbody>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
<tr>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
<td>testtd>
tr>
tbody>
table>
<ul class="pagination">
<li><a href="#">首页a>li>
<li><a href="#">上一页a>li>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>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插件