修改之后，如果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