不刷新页面,如何做到改变表格中行的编辑状态

一开始是个单元格？点中Radio Button后变成text框？然后呢？

解决方案 »

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD><BODY>
<TABLE id="tb">
<TR>
<TD><input type="radio" onclick="showEdit(this)" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" onclick="showEdit(this)" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" onclick="showEdit(this)" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
<table border=1 width=100%>
  <tr>
    <td><input name=m type=radio onclick="mm(this)"></td>
    <td>1111</td>
    <td>2222</td>
    <td>3333</td>
  </tr>
  <tr>
    <td><input name=m type=radio onclick="mm(this)"></td>
    <td>1111</td>
    <td>2222</td>
    <td>3333</td>
  </tr>
  <tr>
    <td><input name=m type=radio onclick="mm(this)"></td>
    <td>1111</td>
    <td>2222</td>
    <td>3333</td>
  </tr>
</table><SCRIPT LANGUAGE="JavaScript">
window.SearchByTagName = function(e, TAG)
{
    while(e!=null && e.tagName){
    if(e.tagName==TAG.toUpperCase()) return(e);
    e = e.parentNode; } return null;
}
var _g = -1; //global
function mm(e)
{
    var td = SearchByTagName(e, "TD");
    var tr = td.parentNode;
    var tab = SearchByTagName(tr, "TABLE");
    if(_g>=0)
    {
        for(var i=td.cellIndex+1; i<tab.rows[_g].cells.length; i++)
        {
            var a = tab.rows[_g].cells[i].getElementsByTagName("INPUT");
            for(var k=0; k<a.length; k++)
            {
                if(a[k].type=="text")
                {
                    a[k].outerHTML = a[k].value;  //就这句代码不能被非IE浏览器兼容
                }
            }
        }
    }   _g = tr.rowIndex;
    for(var i=td.cellIndex+1; i<tr.cells.length; i++)
    {
        tr.cells[i].innerHTML = "<input style='width: 100%' value='"+ tr.cells[i].innerHTML +"'>";
    }
}
</SCRIPT>
首先感谢上面两位的回答.
这样解决了将文本信息改变成编辑框,但文本中的信息是要提交的,如果将各个字段与FORM中对应起来?另外,一行中可能只有部分要改变编辑状态,有的列还是显示为文本不需要改变.是否每个单元格要做一下标记才能做到?
回: MrYou(菜鸟飞飞)
接下来就是可以更改可编辑部分的内容,然后就是提交到后台了.
<table border=1 width=100%>
  <tr>
    <td><input name=m type=checkbox onclick="mm(this)"></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
  </tr>
  <tr>
    <td><input name=m type=checkbox onclick="mm(this)"></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
  </tr>
  <tr>
    <td><input name=m type=checkbox onclick="mm(this)"></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
  </tr>
</table><SCRIPT LANGUAGE="JavaScript">function mm(e)
{
  var currentTr=e.parentElement.parentElement;
  var inputObjs=currentTr.getElementsByTagName("input");
  for(var i=0;i<inputObjs.length;i++)
  {
   if(inputObjs[i]==e) continue;
    inputObjs[i].disabled=!e.checked;
  }}
</SCRIPT>
最后采用的是meizz的方法.不过,也遇到很多问题.比如不是所有的列都变成可编辑状态,另外,如果显示的信息中含有HTML字符的话, 用a[k].outerHTML = a[k].value是有问题的.由于有一些验证是通过后台来完成的,在检验不通过的情况下还要保持提交前输入的值等等,不过最后还是搞定了.^_^
最终的解决参见:http://www.blogjava.net/dechon/archive/2005/12/08/22957.html