修改之后，如果CheckBox=false，那么Textbox的值会恢复到原来保存过的值。觉得这样比较符合实际中的应用，呵呵
如下（修改之后的）：
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" onclick="editMode(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Category Name">
<ItemTemplate>
// originalText属性 将最原始的值保存下来，当checkBox Checked=false的时候，将该值恢复到原来的值
<asp:TextBox ID="txtCategoryName" BorderWidth="0px" CssClass="textbox" runat="server" originalText='<%# Eval("CategoryName") %>' Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script language="javascript" type="text/javascript">
disableGridViewTextBoxes();
// make all the input elements hidden
function disableGridViewTextBoxes()
{
var gvControl = document.getElementById("gvCategories");
var inputElements = gvControl.getElementsByTagName("INPUT");
for(i=0;i<inputElements.length;i++)
{
if(isTextBox(inputElements[i]))
{
inputElements[i].disabled = true;
}
}
}
function isTextBox(obj)
{
return obj.type == 'text';
}
function editMode(obj)
{
var rowObject = obj.parentElement.parentElement;
var inputElements = getElementsByTagName(rowObject,"INPUT");
if(obj.checked)
{
showElements(inputElements,"INPUT","text");
}
else
{
hideElements(inputElements,"text");
}
}
function showElements(list, tagName,type)
{
for(i=0;i<list.length;i++)
{
if(isTypeOf(list[i],"text"))
{
list[i].disabled = false;
list[i].focus();
list[i].select();
}
}
}
function isTypeOf(obj,type)
{
return obj.type == type;
}
function hideElements(list, type)
{
for(i=0; i<list.length;i++)
{
if(isTypeOf(list[i],type))
{
////恢复原来的值
list[i].value=list[i].oralText;
list[i].disabled = true;
}
}
}
function getElementsByTagName(obj,tagName)
{
return obj.getElementsByTagName(tagName);
}
Take a look at the effect in the following animation.
这个技巧确实不错，感谢Dflying Chen