有个表,结构如下,我想通过Ajax来更改其中的“作业编号”,我现在做到了,单击“作业编号”的td把里面的文本改成了文本框,并且可以更改文本,当文本框失去焦点(在页面其他地方单击)后文本框消失,原来的“作业编号”更改了,但涉及到后台数据库更新时,我遇到了麻烦,我获取不到这个记录的ID,下面是js代码:
$(function(){
$(".cssTaskSn").click(function(){//给cssTaskSn加上click
var objTd=$(this);//保存对象
var oldText=$.trim(objTd.text());//保存原来的文本
var input=$("<input type='text'value='"+oldText+"' />");//定义input变量为一个文本框把原来文本写入
objTd.html(input)//当前td变为文本框,把原来文本写入
//设置文本框点击事件失效
input.click(function(){
return false;
});
//设置select全选文本事件,先触发焦点
input.trigger("focus").trigger("select");
//文本框失去焦点变回文本
input.blur(
function(){
var newText=$(this).val();
objTd.html(newText);
var taskSnId=$.trim((objTd.prev()).prev().text());
alert(taskSnId);//这里显示的是空的,不知道怎么获取这个id,这个idq我是绑在一个隐藏的文本框上的见html代码和aspx代码。
});
});
})
aspx代码(整个表格的代码):
<table class="display stylized" id="example">
<thead>
<tr>
<th style="width: 60px">
<input type="checkbox" id="chkAll" name="chkAll" value="checkbox" onclick="checkAll(this);" />全选
</th>
<th style="width: 50px">序号</th>
<th style="width: 200px">作业编号</th>
<th style="width: 200px">创建时间</th>
</tr>
</thead>
<asp:Repeater ID="rpTaskSn" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="cbxId" runat="server" /><asp:TextBox ID="tbxId" runat="server" Text='<%# Eval("id")%>' Style="display: none;"></asp:TextBox>
</td>
<td><%# Container.ItemIndex+1 %></td>
<td class="cssTaskSn"><%#Eval("taskSn") %></td>
<td><%#Eval("time") %></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
<div> 操作选项:<asp:LinkButton ID="lbtnDeltaskSn" runat="server" onclick="lbtnDeltaskSn_Click">删除选中项目</asp:LinkButton></div>
生成的html代码(一个tr的代码):<tr>
<td>
<input id="rpTaskSn_ctl00_cbxId" type="checkbox" name="rpTaskSn$ctl00$cbxId" />
<input name="rpTaskSn$ctl00$tbxId" type="text" value="9" id="rpTaskSn_ctl00_tbxId" style="display: none;" />
</td>
<td> 1</td>
<td class="cssTaskSn">六上第4课</td>
<td>2011-1-18 19:53:46</td>
</tr>
$(function(){
$(".cssTaskSn").click(function(){//给cssTaskSn加上click
var objTd=$(this);//保存对象
var oldText=$.trim(objTd.text());//保存原来的文本
var input=$("<input type='text'value='"+oldText+"' />");//定义input变量为一个文本框把原来文本写入
objTd.html(input)//当前td变为文本框,把原来文本写入
//设置文本框点击事件失效
input.click(function(){
return false;
});
//设置select全选文本事件,先触发焦点
input.trigger("focus").trigger("select");
//文本框失去焦点变回文本
input.blur(
function(){
var newText=$(this).val();
objTd.html(newText);
var taskSnId=$.trim((objTd.prev()).prev().text());
alert(taskSnId);//这里显示的是空的,不知道怎么获取这个id,这个idq我是绑在一个隐藏的文本框上的见html代码和aspx代码。
});
});
})
aspx代码(整个表格的代码):
<table class="display stylized" id="example">
<thead>
<tr>
<th style="width: 60px">
<input type="checkbox" id="chkAll" name="chkAll" value="checkbox" onclick="checkAll(this);" />全选
</th>
<th style="width: 50px">序号</th>
<th style="width: 200px">作业编号</th>
<th style="width: 200px">创建时间</th>
</tr>
</thead>
<asp:Repeater ID="rpTaskSn" runat="server">
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="cbxId" runat="server" /><asp:TextBox ID="tbxId" runat="server" Text='<%# Eval("id")%>' Style="display: none;"></asp:TextBox>
</td>
<td><%# Container.ItemIndex+1 %></td>
<td class="cssTaskSn"><%#Eval("taskSn") %></td>
<td><%#Eval("time") %></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
<div> 操作选项:<asp:LinkButton ID="lbtnDeltaskSn" runat="server" onclick="lbtnDeltaskSn_Click">删除选中项目</asp:LinkButton></div>
生成的html代码(一个tr的代码):<tr>
<td>
<input id="rpTaskSn_ctl00_cbxId" type="checkbox" name="rpTaskSn$ctl00$cbxId" />
<input name="rpTaskSn$ctl00$tbxId" type="text" value="9" id="rpTaskSn_ctl00_tbxId" style="display: none;" />
</td>
<td> 1</td>
<td class="cssTaskSn">六上第4课</td>
<td>2011-1-18 19:53:46</td>
</tr>
input.blur(
function(e){
var row = e.srcElement;
var id = row.cells[1].innerText;
alert(id)
}
)
$(".cssTaskSn").click(function(){//给cssTaskSn加上click
var objTd=$(this);//保存对象
var oldText=$.trim(objTd.text());//保存原来的文本
var input=$("<input type='text'value='"+oldText+"' />");//定义input变量为一个文本框把原来文本写入
objTd.html(input)//当前td变为文本框,把原来文本写入
//设置文本框点击事件失效
input.click(function(){
return false;
});
//设置select全选文本事件,先触发焦点
input.trigger("focus").trigger("select");
//文本框失去焦点变回文本
input.blur(
function(e){
var row = e.srcElement;
var id = row.cells[1].innerText;
alert(id)
}
)
// input.blur(
// function(){
// var newText=$(this).val();
// objTd.html(newText);
// var taskSnId=$.trim((objTd.prev()).prev().text());
//alert(taskSnId);
// });
});
})但运行后提示:
错误:'cells.1'为空或不是对象
<td style="display:none;">
<%# Eval("id")%>
</td>隐藏的文本框绑定ID是为了全选整个checkbox后传到后台用的,我不知道是否能将ID绑定到checkbox上,如果绑上,且在后台能取到,倒是可以省略这个隐藏的文本框。