点击单元格文字可以编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

1楼好强啊,基本上就是这样的.不过界面不够漂亮,样式我又不太懂,能对表格及单元格加样式吗,比如双击后选中文字,但出现的文本框看不到,也就是与单元格同色同宽,让人觉得不是在文本框中编辑,就象excel那样.
简单的搞了一下
<script>
function modify(tar){
var o=document.createElement("input");
var str=tar.innerHTML;
tar.innerHTML="";
o.name="v";
o.type="text";
o.value=str;
o.onblur=function(){saveit(this.value,this)};
o.onclick=function(){return false;};
tar.appendChild(o);
o.select(); } function saveit(value,tar){
alert('保存值为:'+value);//在这里异步保存到数据库
tar.parentNode.innerHTML=value;
}
</script>
<style type="text/css">
input,td{font-size:14px;font-family:宋体;}
input{width:90px;border:none;}
td{width:100px;height:16px;line-height:14px;word-break:break-all;word-wrap:break-word;}
table{width:300px;}
</style>
<table width="300" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC" id="table1">
    <tr>
        <td bgcolor="#FFFFFF" onDblClick="modify(this)">文字一 </td>
        <td bgcolor="#FFFFFF" onDblClick="modify(this)"> 文字二 </td>
        <td bgcolor="#FFFFFF" onDblClick="modify(this)">文字三 </td>
    </tr>
</table>
最近在研究表格排序,顺便也研究了下表格样式
虽然不怎么好,但也算马马乎乎.........(PS:表头的线对的有点歪)
<style type="text/css">
.content{border:#CCCCCC solid;border-width:1 0 0 1; clear:left}
.td{border:#CCCCCC solid;border-width:0 1 1 0; height:24px; vertical-align:middle; font-size:12px; padding-left:5px}
.div{ background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081124/101657477.p.gif);height:17px !important; height:19px; line-height:19px; vertical-align:middle; font-size:12px; padding-left:1px; color:#183C94; border:0px;}
.div1{height:19px; width:1px; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081124/101657508.p.gif); overflow:hidden; margin-right:5px;float:left;cursor: w-resize}
</style>
<table id="tab"  border="0" cellspacing="0" cellpadding="0"  style="clear:left; border:1px solid #9EC4D1">
  <tr>
    <td class="div" onmouseover="ccolor(this)" onmouseout="ccolor(this)"><div class="div1"></div>编号</td>
    <td class="div" onmouseover="ccolor(this)" onmouseout="ccolor(this)"><div class="div1"></div>姓名</td>
    <td class="div" onmouseover="ccolor(this)" onmouseout="ccolor(this)"><div class="div1"></div>性别</td>
    <td class="div" onmouseover="ccolor(this)" onmouseout="ccolor(this)"><div class="div1"></div>出生日期</td>
    <td class="div" onmouseover="ccolor(this)" onmouseout="ccolor(this)"><div class="div1"></div>备注</td>
  </tr>
</table>
<script>
var onclick=false
//var onblur=false
var width=[60,100,60,120,200]
var data=[[1,"啊一","男","1985-05-27","我很懒,什么都没留下"],[2,"啊二","男","1982-05-27","我很懒,什么都没留下"],[3,"脏三","男","1981-05-27","我很懒,什么都没留下"],[4,"你四","女","1985-05-17","我很懒,什么都没留下"],[5,"王老无","男","1985-05-27","我很懒,什么都没留下"],[6,"找六","女","1985-09-27","我很懒,什么都没留下"],[7,"高起","男","1995-05-27","我很懒,什么都没留下"],[8,"刘八","女","1985-05-27","我很懒,什么都没留下"]]
setwidth("tab")function setwidth(id)
{var bb=document.getElementById(id)
for(var i=0;i<width.length;i++)
{bb.getElementsByTagName("td")[i].style.width=width[i]+"px"}}function ccolor(obj)
{obj.style.backgroundImage=(obj.style.backgroundImage=="url(http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif)"?"url(1.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif)")}function createtab(){
var tab = document.createElement("table")
tab.className="content"
tab.id="content"
tab.border=0;tab.cellPadding=0;tab.cellSpacing=0;
document.body.appendChild(tab)
var tbd = document.createElement('tbody');
for(var i=0;i<data.length;i++)
{
     var tr=document.createElement("tr")
if((i+1)%2==0)
{tr.style.backgroundColor="#f5f5f5"}
     for(var j=0;j<data[i].length;j++)
     { var td=document.createElement("td")
       td.innerHTML=data[i][j]
   if(j!=0)
   {td.onclick=function(){revised(this) }}
   td.className="td"
   tr.appendChild(td)
}
tbd.appendChild(tr)
}
tab.appendChild(tbd)
for(var i=0;i<width.length;i++)
{tab.getElementsByTagName("td")[i].style.width=(width[i]-6)+"px"}
tab.getElementsByTagName("td")[0].style.width=width[0]+"px"
}
createtab()function revised(e){
if(onclick) return
var input =document.createElement("input")
input.type="text"
if(e.innerHTML==" ")
{input.value=""}
else
{input.value=e.innerHTML}
input.value=e.innerHTML
input.onblur=function(){cc(e)}
input.style.width=e.offsetWidth-7+"px"
input.style.height=e.offsetHeight-4+"px"
e.innerHTML=""
e.appendChild(input)
input.focus()
onclick=true
}function cc(e){
//if(!onblur) {onblur=true;return}
if(e.getElementsByTagName("input")[0].value=="") e.getElementsByTagName("input")[0].value=" "
e.innerHTML=e.getElementsByTagName("input")[0].value;
onclick=false;//onblur=false}
</script>
.
.
.
if(e.innerHTML==" ")
{input.value=""}
else
{input.value=e.innerHTML}
input.value=e.innerHTML   //这一行要去掉.....
.
.
.
.
...好象上面的是个错的....
<style type="text/css">
.content{border:#CCCCCC solid;border-width:1 0 0 1; clear:left}
.td{border:#CCCCCC solid;border-width:0 1 1 0; height:24px; vertical-align:middle; font-size:12px; padding-left:5px}
.div{ background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081124/101657477.p.gif);height:17px !important; height:19px; line-height:19px; vertical-align:middle; font-size:12px; padding-left:1px; color:#183C94; border:0px;}
.div1{height:19px; width:1px; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081124/101657508.p.gif); overflow:hidden; margin-right:5px;float:left;cursor: w-resize}
</style>
<table id="tab"  border="0" cellspacing="0" cellpadding="0"  style="clear:left; border:1px solid #9EC4D1">
  <tr>
    <td class="div" onmouseover="ccolor(this)" onmouseout="ccolor(this)"><div class="div1"></div>编号</td>
    <td class="div" onmouseover="ccolor(this)" onmouseout="ccolor(this)"><div class="div1"></div>姓名</td>
    <td class="div" onmouseover="ccolor(this)" onmouseout="ccolor(this)"><div class="div1"></div>性别</td>
    <td class="div" onmouseover="ccolor(this)" onmouseout="ccolor(this)"><div class="div1"></div>出生日期</td>
    <td class="div" onmouseover="ccolor(this)" onmouseout="ccolor(this)"><div class="div1"></div>备注</td>
  </tr>
</table>
<script>
var onclick=false
//var onblur=false
var width=[60,100,60,120,200]
var data=[[1,"啊一","男","1985-05-27","我很懒,什么都没留下"],[2,"啊二","男","1982-05-27","我很懒,什么都没留下"],[3,"脏三","男","1981-05-27","我很懒,什么都没留下"],[4,"你四","女","1985-05-17","我很懒,什么都没留下"],[5,"王老无","男","1985-05-27","我很懒,什么都没留下"],[6,"找六","女","1985-09-27","我很懒,什么都没留下"],[7,"高起","男","1995-05-27","我很懒,什么都没留下"],[8,"刘八","女","1985-05-27","我很懒,什么都没留下"]]
setwidth("tab")function setwidth(id)
{var bb=document.getElementById(id)
for(var i=0;i<width.length;i++)
{bb.getElementsByTagName("td")[i].style.width=width[i]+"px"}}function ccolor(obj)
{obj.style.backgroundImage=(obj.style.backgroundImage=="url(http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif)"?"url(1.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20081126/000054336.p.gif)")}function createtab(){
var tab = document.createElement("table")
tab.className="content"
tab.id="content"
tab.border=0;tab.cellPadding=0;tab.cellSpacing=0;
document.body.appendChild(tab)
var tbd = document.createElement('tbody');
for(var i=0;i<data.length;i++)
{
     var tr=document.createElement("tr")
if((i+1)%2==0)
{tr.style.backgroundColor="#f5f5f5"}
     for(var j=0;j<data[i].length;j++)
     { var td=document.createElement("td")
       td.innerHTML=data[i][j]
   if(j!=0)
   {td.onclick=function(){revised(this) }}
   td.className="td"
   tr.appendChild(td)
}
tbd.appendChild(tr)
}
tab.appendChild(tbd)
for(var i=0;i<width.length;i++)
{tab.getElementsByTagName("td")[i].style.width=(width[i]-6)+"px"}
tab.getElementsByTagName("td")[0].style.width=width[0]+"px"
}
createtab()function revised(e){
if(onclick) return
var input =document.createElement("input")
input.type="text"
if(e.innerHTML==" ")
{input.value=""}
else
{input.value=e.innerHTML}
input.onblur=function(){cc(e)}
input.style.width=e.offsetWidth-7+"px"
input.style.height=e.offsetHeight-4+"px"
e.innerHTML=""
e.appendChild(input)
input.focus()
onclick=true
}function cc(e){
//if(!onblur) {onblur=true;return}
if(e.getElementsByTagName("input")[0].value=="") e.getElementsByTagName("input")[0].value=" "
e.innerHTML=e.getElementsByTagName("input")[0].value;
onclick=false;//onblur=false}</script>