1.contentEditable
最開始是想設置div的contentEditable爲true來實現，要說明的是td是沒有contentEditable屬性的，我在其中加了一個div。但這種效果很差，字很藍色邊框之間是沒有間距的。
document.getElementById(id).contentEditable=true;
2.直接用input
還找到一個取消顯示小叉的方法
<span style="font-size:18px;">input::-ms-clear { display: none; }</span>然後我就想辦法消除input的border，但是很不幸的是不管是border：0`還是border-style:none亦或是border:none,都是有個框的，我要的是編輯之前沒有任何痕跡的那種樣式。
3.使用js動態生一個input
這是原地址不過是有bug的，即onblur時沒有移除這個控件，修改的值也不會回填。我修改了一下，實現我想要的功能。下面是改寫的demo（只能填寫整數位爲1且最多保留兩位），備忘一下：
首先是要用到的map.js:
//js中map的實現
function Map() {
this.elements = new Array();
//獲取MAP元素個數
this.size = function() {
return this.elements.length;
};
//判斷MAP是否爲空
this.isEmpty = function() {
return (this.elements.length < 1);
};
//刪除MAP所有元素
this.clear = function() {
this.elements = new Array();
};
//向MAP中增加元素（key, value)
this.put = function(_key, _value) {
this.elements.push( {
key : _key,
value : _value
});
};
//刪除指定KEY的元素，成功返回True，失敗返回False
this.remove = function(_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
this.elements.splice(i, 1);
return true;
}
}
} catch (e) {
bln = false;
}
return bln;
};
//獲取指定KEY的元素值VALUE，失敗返回NULL
this.get = function(_key) {
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
return this.elements[i].value;
}
}
} catch (e) {
return null;
}
};
//獲取指定索引的元素（使用element.key，element.value獲取KEY和VALUE），失敗返回NULL
this.element = function(_index) {
if (_index < 0 || _index >= this.elements.length) {
return null;
}
return this.elements[_index];
};
//判斷MAP中是否含有指定KEY的元素
this.containsKey = function(_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
};
//判斷MAP中是否含有指定VALUE的元素
this.containsValue = function(_value) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].value == _value) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
};
//獲取MAP中所有VALUE的數組（ARRAY）
this.values = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].value);
}
return arr;
};
//獲取MAP中所有KEY的數組（ARRAY）
this.keys = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].key);
}
return arr;
};
}<html>
<head>
<title>3333</title>
<script language="javascript" src="map.js"></script>
<!-- map.js的源碼在下方，csdn不能上傳 -->
<style>
table.altrowstable {
font-family: verdana,arial,sans-serif;
width:100%;
cellpadding:2px;
cellspacing:1;
table-layout:fixed;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
text-align: center;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
background-color: #d4e3e5;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>
</head>
<body>
<input id="b" type="button" onclick="getJsonString()" value=" 顯示json數據">
<table id="editTable" style="width:100%" class="altrowstable">
<caption algin="left">可編輯表格</caption>
<tr>
<td id="1">1.1</td>
<td id="2">1.21</td>
<td id="3">1.2</td>
</tr>
<tr>
<td id="4">1.0</td>
<td id="5">1.5</td>
<td id="6">1.22</td>
</tr>
<tr>
<td id="7">1.96</td>
<td id="8">1.23</td>
<td id="9">1.44</td>
</tr>
</table>
</body>
</html>
<script>
function altRows(id){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
window.onload=function(){
altRows('editTable');
}
var map=new Map();
//dom創建文本框
var tempTdValue="";
var input = document.createElement("input");
input.type="text" ;
input.style.width="100px"
//只能輸入1.**的保留兩位有效數字
function clearInput(obj){
obj.value = obj.value.replace(/[^\d.]/g,""); //清除"數字"和"."以外的字符
obj.value = obj.value.replace(/^[^1]/g,"");//不是1開頭的
obj.value = obj.value.replace(/^1[^\.].*$/g,"1");//第二位是不是小數點的
obj.value = obj.value.replace(/^\./g,""); //驗證第一個字符是數字而不是.
obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一個. 清除多餘的
obj.value = obj.value.replace(/^(1)\.(\d\d).*$/,'$1.$2'); //只能輸入兩個小數
}
//得到當前的單元格
var currentCell ;
function editCell(event)
{
var id="";
if(event==null)
{
currentCell=window.event.srcElement;
}
else
{
id=window.event.srcElement.id;
currentCell=event.target;
map.remove(id);
alert("id是："+id);
}
//根據Dimmacro 的建議修定下面的bug 非常感謝
if(currentCell.tagName=="TD"){
//用單元格的值來填充文本框的值
input.value=currentCell.innerHTML;
tempTdValue=currentCell.innerHTML;
//當文本框丟失焦點時調用last
input.onblur=function(){
last();
if(tempTdValue!=input.value) {
if(map.containsKey(id)){
map.remove(id);
if(input.value==""){
map.put(id, null);
}else{
map.put(id, input.value);
}
}else{
if(input.value==""){
map.put(id, null);
}else{
map.put(id, input.value);
}
}
};
removeElement(input);
}
input.onkeyup=function(){
clearInput(input);
}
input.onafterpaste=function(){
clearInput(input);
}
//input.ondblclick=last();
currentCell.innerHTML="";
//把文本框加到當前單元格上.
currentCell.appendChild(input);
//根據liu_binq63 的建議修定下面的bug 非常感謝
input.focus();
}
}
function getJsonString(){
var arrKey=map.keys();
var jsonString = "{";
for(var index=0;index<arrKey.length;index++){
jsonString+=arrKey[index]+":"+map.get(arrKey[index])+",";
}
jsonString += "}";
alert("json串:"+jsonString);
}
function removeElement(_element){
var _parentElement = _element.parentNode;
if(_parentElement){
_parentElement.removeChild(_element);
}
}
function last()
{
//充文本框的值給當前單元格
currentCell.innerHTML = input.value;
}
//最後爲表格綁定處理方法.使用時有可能不執行，改放到window.onload=function(){};中
document.getElementById("editTable").ondblclick=editCell;
</script>