如何实现对表格内容的编辑？


<head>
<STYLE>
.td1 { color: white;  background-color: orange;}
.td2 { color: white;  background-color: #0099ff;}
.td3 { color: white;  background-color: #336699;}
</STYLE>
<SCRIPT>
function editCell (cell) {
    if (document.all) {
    cell.innerHTML = '<INPUT ID="editCell"  ONCLICK="event.cancelBubble = true;"  ONCHANGE="setCell(this.parentElement, this.value)"  ONBLUR="setCell(this.parentElement, this.value)" VALUE="' + cell.innerText + '"  SIZE="' + cell.innerText.length + '">'; document.all.editCell.focus();
    document.all.editCell.select(); 
    }else if (document.getElementById) { 
    cell.normalize(); 
    var input = document.createElement('INPUT'); 
    input.setAttribute('value', cell.firstChild.nodeValue); 
    input.setAttribute('size', cell.firstChild.nodeValue.length); 
    input.onchange = function (evt) {  setCell(this.parentNode, this.value); }; 
    input.onclick = function (evt) {  evt.cancelBubble = true; 
    if (evt.stopPropagation)       
    evt.stopPropagation(); 
    };
    cell.replaceChild(input, cell.firstChild);
    input.focus();
    input.select();
    }
}function setCell (cell, value) {
if (document.all)cell.innerText = value;
else if (document.getElementById)cell.replaceChild(document.createTextNode(value), cell.firstChild);
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE BORDER="2">
<TR>
<TD ONCLICK="editCell(this);" CLASS="td1">欢迎光临</TD>
<TD ONCLICK="editCell(this);" CLASS="td2">[孟宪会之精彩世界]</TD>
<TD ONCLICK="editCell(this);" CLASS="td3">http://lucky.myrice.com</TD>
</TR>
</TABLE>
</body>
</HTML>
例子

解决方案 »

  1.   

    楼上正解，如果要与数据库进行交互的话在function setCell处写上即可
      

  2.   

    test
    <html>
    <head>
    <style type="text/css">
    *{font-size:12px;}
    table{border-collapse: collapse; width:300px;}
    td{border:1px solid #D6D5D1 height:23px; line-height:23px;}
    .tr{background:#07216B; color:#fff;}
    .inp{border:0;  color:#000;}
    </style>
    <SCRIPT>
    function et(){
    var tds = document.getElementById('edit_tab').rows;
    for(var i=0; i<tds.length; i++){
    tds[i].onmouseover = function(){this.className = 'tr'}
    tds[i].onmouseout = function(){this.className = ''}
    for(var n=0; n<tds[i].cells.length; n++){
    tds[i].cells[n].onclick = function(){
    if(this.e)return;
    var inp = document.createElement('input');
    inp.className = 'inp';
    inp.style.width = this.offsetWidth-2 + 'px';
    inp.style.height = this.offsetHeight-4 + 'px';
    inp.style.lineHeight = this.offsetHeight-4 + 'px'; 
    inp.value = this.innerHTML;
    inp.onblur = function(){
    this.parentNode.e = false;
    this.parentNode.innerHTML = this.value;
    }
    this.innerHTML = '';
    this.appendChild(inp);
    inp.focus();
    inp.select();
    this.e = true;
    }
    }
    }
    }
    window.onload = et;
    </SCRIPT>
    </HEAD>
    <BODY>
    <table id="edit_tab" cellspacing="0" cellpadding="0">
    <tr><td  style="width:20%">01</td><td style="width:35%">式式</td><td style="width:45%">牛年</td></tr>
    <tr><td>02</td><td>奥运年</td><td>北京2008</td></tr>
    <tr><td>03</td><td>式式</td><td>牛年</td></tr>
    </table>
    </body>
    </HTML>