客户端修改值存储到数据库中

我单击单元格修改任意单元格的值，并存储，该如何做呢，把代码copy 到html中就能直接运行（c#）
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <META http-equiv="Content-Style-Type" content="text/css">    </head>
    <body >
        <div id="movediv" style="background-color:#ffeeff;position:absolute;width:100px;height:20px;z-index:5">点击编辑</div>
        <TABLE id = "tb2" width = "100%" cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1" style="position:absolute;left:50px;z-index:1" align ="center">
            <tr>
                <td align="center">项目 </td>
                <td align="center">单位 </td>
                <td align="center">数量 </td>
                <td align="center">备 注 </td>
            </tr>
            <tr>
                <td align="center">供水平均温度 </td>
                <td align="center"> <font face="宋体">℃ </font> </td>
                <td exp="AverData(15,1)" align="center" >　 </td>
                <td align="center">　 </td>
            </tr>
            <tr>
                <td align="center">回水平均温度 </td>
                <td align="center"> <font face="宋体">℃ </font> </td>
                <td exp="AverData(15,2)" align="center" >　 </td>
                <td align="center">　 </td>
            </tr>
            <tr>
                <td align="center">温差 </td>
                <td align="center"> <font face="宋体">℃ </font> </td>
                <td exp="AverData(15,1)-AverData(15,2)" align="center" >　 </td>
                <td align="center">　 </td>
            </tr>        </TABLE>
<script>
 //获取单元格
     document.onclick   =   function(e)
     {   
   e   =   window.event   ||   e;   
      e   =   e.srcElement   ||   e.target;   
  if(   e.tagName   &&   e.tagName.toLowerCase()   ==   "td"   )   
   alert("行号："   +   e.parentNode.rowIndex   +   "\n"   +   "列号："   +   e.cellIndex);   
   }   

//显示层
        var TH_HEIGHT="20px";
 
        var lastObj;
        window.onload=function()
        {
          
  
 
            var tb=document.getElementById("tb2");
            for(var i=0;i<tb.rows.length;i++)
            {
                for(var j=0;j<tb.rows[i].cells.length;j++)
                {
                    tb.rows[i].cells[j].onclick=alertMe
                }
            }        }
         function alertMe()
        {
               var event=window.event||arguments[0] 
           
var obj=event.srcElement||event.target;

               if(lastObj == obj) return false;
        
            lastObj = obj;
              document.getElementById("movediv").style.left=obj.offsetLeft+15;
              document.getElementById("movediv").style.top=obj.offsetTop;
            // document.getElementById("movediv").innerHTML=obj.innerHTML
           
                    }
//编辑层
var obj1=document.getElementById("movediv"); 
var temp_info=obj1.innerHTML; 
obj1.onclick=function()
{ 
    obj1.innerHTML=""; 
  
    var temp_text = document.createElement("input"); 
    temp_text.id="test"; 
    temp_text.value=temp_info.replace(/\r\n?/, "\n"); 
    obj1.appendChild(temp_text); 

    var temp_btn = document.createElement("input"); 
    temp_btn.type="button"; 
    temp_btn.value="保存"; 
    temp_btn.onclick=function()
    { 
     obj1.innerHTML=document.getElementById("test").value; 
     } 
      obj1.appendChild(temp_btn); 
} 

</script>
    </body>
</html>

解决方案 »

  1.   

    保存在表格里吗?这样<html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
            <META http-equiv="Content-Style-Type" content="text/css">    </head>
        <body >
            <div id="movediv" style="background-color:#ffeeff;position:absolute;width:100px;height:20px;z-index:5">点击编辑 </div>
            <TABLE id = "tb2" width = "100%" cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1" style="position:absolute;left:50px;z-index:1" align ="center">
                <tr>
                    <td align="center">项目 </td>
                    <td align="center">单位 </td>
                    <td align="center">数量 </td>
                    <td align="center">备 注 </td>
                </tr>
                <tr>
                    <td align="center">供水平均温度 </td>
                    <td align="center"> <font face="宋体">℃ </font> </td>
                    <td exp="AverData(15,1)" align="center" >　 </td>
                    <td align="center">　 </td>
                </tr>
                <tr>
                    <td align="center">回水平均温度 </td>
                    <td align="center"> <font face="宋体">℃ </font> </td>
                    <td exp="AverData(15,2)" align="center" >　 </td>
                    <td align="center">　 </td>
                </tr>
                <tr>
                    <td align="center">温差 </td>
                    <td align="center"> <font face="宋体">℃ </font> </td>
                    <td exp="AverData(15,1)-AverData(15,2)" align="center" >　 </td>
                    <td align="center">　 </td>
                </tr>
            </TABLE>
            <script>
                //获取单元格
                document.onclick  =  function(e)
                {
                    e  =  window.event  ||  e;
                    e  =  e.srcElement  ||  e.target;
                    if(  e.tagName  &&  e.tagName.toLowerCase()  ==  "td"  );
                       // alert("行号："  +  e.parentNode.rowIndex  +  "\n"  +  "列号："  +  e.cellIndex);
                }            //显示层
                var TH_HEIGHT="20px";            var lastObj;
                window.onload=function()
                {                var tb=document.getElementById("tb2");
                    for(var i=0;i <tb.rows.length;i++)
                    {
                        for(var j=0;j <tb.rows[i].cells.length;j++)
                        {
                            tb.rows[i].cells[j].onclick=alertMe
                        }
                    }            }
                function alertMe()
                {
                    var event=window.event||arguments[0]                var obj=event.srcElement||event.target;                if(lastObj == obj) return false;                lastObj = obj;
                    document.getElementById("movediv").style.left=obj.offsetLeft+15;
                    document.getElementById("movediv").style.top=obj.offsetTop;
                    // document.getElementById("movediv").innerHTML=obj.innerHTML            }
                //编辑层
                var obj1=document.getElementById("movediv");
                var temp_info=obj1.innerHTML;
                obj1.onclick=function()
                {
                    obj1.innerHTML="";                var temp_text = document.createElement("input");
                    temp_text.id="test";
                    temp_text.value=temp_info.replace(/\r\n?/, "\n");
                    obj1.appendChild(temp_text);                var temp_btn = document.createElement("input");
                    temp_btn.type="button";
                    temp_btn.value="保存";
                    temp_btn.onclick=function()
                    {
                        lastObj.innerHTML=document.getElementById("test").value;
                    }
                    obj1.appendChild(temp_btn);
                }        </script>
        </body>
    </html> 
      

  2.   

    这个只能用ajax
    肯定得调用另外个程序文件asp / asp.net
      

  3.   

    我觉得这个效果更好些<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>test</title>
    <style type="text/css">
    input {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #999999;
    background-color: #FFFFE1;
    border: 1px solid #999999;
    }
    </style>
    </head>
    <body>
    <div id="mydiv"></div>
    <table width="80%"  border="1" bordercolorlight="#CCCCCC" bordercolordark="#FFFFFF" onclick="setEdit(event)" onkeydown="checkAdd(event)">
      <tr>
        <td width="20%">343</td>
        <td width="20%">sdf</td>
        <td width="20%">asdf</td>
        <td width="20%">asf</td>
        <td width="20%">35r32</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
        <td>444</td>
        <td>555</td>
      </tr>
      <tr>
        <td>adfdsf</td>
        <td>adfdsf</td>
        <td>adfsdf  </td>
        <td>   dafssda</td>
        <td>  dafdsf</td>
      </tr>
      <tr>
        <td>2342432</td>
        <td>asdf</td>
        <td> dfsasdfds</td>
        <td>3243243</td>
        <td>asdfasf</td>
      </tr>
      <tr>
        <td>h</td>
        <td>ghhhh</td>
        <td>hhhh</td>
        <td>ea</td>
        <td>ghghhh</td>
      </tr>
    </table>
    </body>
    </html>
    <script language="javascript">
    oldObj="";
    var newInput=document.createElement("input");            //雄怓斐膘怀遺
    newInput.type="text";                                    //怀遺濬倰
    function setEdit(e){                                    //扢离晤憮奀腔袨怓
        var tdObj = e.srcElement? e.srcElement : (e.target ? e.target : e);//等僻腔勤砓
    var obj;
    if(tdObj.tagName && tdObj.tagName=="TD"){           //瓚剿岆瘁岆等啋跡
    if(oldObj!=""){
                var tobj = document.getElementById('tmpText');//瓚剿岆瘁眒冪湔婓怀遺
    oldObj.removeChild(tobj);                       //痄壺眒冪湔婓腔怀遺
    if(newInput.vlaue=="")                          //場宎趙怀遺腔硉
                  oldObj.innerHTML="&nbsp;";
    else
                  oldObj.innerHTML=newInput.value;              //怀遺腔囀脹衾等啋跡腔囀
    } obj=tdObj;
    oldObj=obj;
    newInput.width=obj.offsetWidth;                     //怀遺腔詢僅睿遵僅
    newInput.height=obj.offsetHeight; newInput.id="tmpText";
    newInput.value=obj.innerHTML;
    obj.innerHTML="";
    obj.appendChild(newInput);                          //蔚怀遺氝樓善等啋跡囀
    newInput.focus();                                   //怀遺鳳腕蝴萸
    }
        tdObj = obj = tobj = null;
    }
    function checkAdd(e){
        if(e && e.keyCode == 13){                               //
           var obj = e.srcElement? e.srcElement : e.target;      //鳳腕等僻勤砓
           var tbl = obj.parentNode.parentNode;                   //等僻勤砓腔逌虜誹萸
    if(oldObj!=""){
                var tobj = document.getElementById('tmpText');  //鳳怀遺
    oldObj.removeChild(tobj);                       //痄壺導怀遺
    if(newInput.vlaue=="")
                  oldObj.innerHTML="&nbsp;";            //等啋跡腔場宎硉
    else
                  oldObj.innerHTML=newInput.value;      //等啋跡腔囀脹衾怀遺腔囀
                var oldObj2 = oldObj;
                oldObj = '';
    }
           if(tbl.tagName && tbl.tagName == 'TR'){          //彆岆等啋俴
             t2 = tbl.cloneNode(true);                      //親癒桶跡
             tbl.parentNode.insertBefore(t2,tbl);           //脣俴
           }
           setEdit(oldObj2);                                  //羲宎晤憮
        }
        obj = tbl = tobj = t2 = oldObj2 = null;
    }
    </script>
    </body>
    </html>
      

  4.   

    那存二维数组的坐标进去,然后在window.onload的时候取数据库,检查取到的td坐标,如果不一样就改个值