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

dechon 2005-12-05 03:27:39

有一个TABLE,第一行是个Radio Button,,后面是一些显示的文本信息.在点击Radio Button后,将该行对应的文本变成TEXT框进行编辑(只有选中的行是可编辑的).以前做的是在点击按钮后进行提交刷新页面,现在改成不刷新页面,请问有什么好的实现方法?

...全文

278 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

dechon 2005-12-08

打赏
举报

最终的解决参见:http://www.blogjava.net/dechon/archive/2005/12/08/22957.html

dechon 2005-12-07

打赏
举报

已经解决了.马上结贴.

dechon 2005-12-07

打赏
举报

最后采用的是meizz的方法.不过,也遇到很多问题.比如不是所有的列都变成可编辑状态,另外,如果显示的信息中含有HTML字符的话, 用a[k].outerHTML = a[k].value是有问题的.由于有一些验证是通过后台来完成的,在检验不通过的情况下还要保持提交前输入的值等等,不过最后还是搞定了.^_^

JK_10000 2005-12-05

打赏
举报

<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>

MrYou 2005-12-05

打赏
举报

迷糊了，只读的不向后台传就可以了阿

dechon 2005-12-05

打赏
举报

不是改不改的问题,是有的列不允许修改的,相当于是只读的.

MrYou 2005-12-05

打赏
举报

关于有的改有的不改，懒人的办法是不管改没改，都用新的覆盖掉旧的：）

dechon 2005-12-05

打赏
举报

回: MrYou(菜鸟飞飞)
接下来就是可以更改可编辑部分的内容,然后就是提交到后台了.

dechon 2005-12-05

打赏
举报

首先感谢上面两位的回答.
这样解决了将文本信息改变成编辑框,但文本中的信息是要提交的,如果将各个字段与FORM中对应起来?另外,一行中可能只有部分要改变编辑状态,有的列还是显示为文本不需要改变.是否每个单元格要做一下标记才能做到?

meizz 2005-12-05

打赏
举报

<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>

harryCom 2005-12-05

打赏
举报

<!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>

MrYou 2005-12-05