如何隐藏使用Javascript从GridView选定的行的复选框？ [英] How to Hide CheckBox of Selected Row from GridView using Javascript?
本文介绍了如何隐藏使用Javascript从GridView选定的行的复选框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在第一列和 Button 中有一个 GridView ，其中 CheckBox $ c>在SecondLast列上。当用户点击按钮 CheckBox 当前行必须使用 Javascript 。
< ASP：GridView的ID = GridView1 RUNAT = 服务器 的AutoGenerateColumns = 假 AllowPaging = 真
每页= 100 AllowSorting = 真 的DataSourceID = sqlUsers 的DataKeyNames = ttppcid
宽度= 100％ OnRowCommand = GridView1_RowCommand EmptyDataText = 否找到数据
OnPageIndexChanging = GridView1_PageIndexChanging OnRowDataBound = GridView1_RowDataBound >
<列>
< asp：TemplateField ItemStyle-Width =30pxItemStyle-HorizontalAlign =CenterHeaderStyle-HorizontalAlign =CenterVisible =true>
< ItemTemplate>
< asp：CheckBox ID =chkSelectrunat =serverHeight =30class =mychkrowid =<％＃Container.DataItemIndex + 1％> />
< / ItemTemplate>
< / asp：TemplateField>
//这里有更多模板
< asp：TemplateField HeaderText =ItemStyle-Width =70pxItemStyle-HorizontalAlign =Center
HeaderStyle-HorizontalAlign =Center>
< ItemTemplate>
< asp：Button ID =BtnSourcerunat =serverText =Sourcerowid =<％＃Container.DataItemIndex + 1％>
class =showButtonOnClick ='<％＃return SetRowValues（+ Eval（ttppcid）+，this.id，+ Eval（Fair）+，+ Eval 好）+，+ Eval（Mint）+，+ Eval（Poor）+，+ Eval（Fair）+）％>'/>
< / ItemTemplate>
< / asp：TemplateField>
< /列>
< / asp：GridView>
Javascript：
函数SetRowValues（id，controlid，fair，good，mint，nnew，poor，broken）{
var rowid = $（＃+ controlid）.attr（ ROWID）;
var chkBoxID;
var chkRowid;
$（'。mychk'）。css（display，block）;
$ b $（'。mychk'）。each（function（）{
chkBoxID = this.id;
alert（chkBoxID）;
chkRowid = $（＃+ chkBoxID）.attr（rowid）;
alert（chkBoxID +ROW：+ chkRowid）;
if（chkRowid == rowid）{
$（＃+ chkBoxID）.css（display，none）;
}
else {
$（＃+ chkBoxID） .css（display，block）;
}
}）;
返回false;
所有的工作都在 alert 我变空了。无法获得 CheckBox的ID 控制
同时试过：
< script type =text / javascript>
$（document）.ready（function（）{
$（function（）{
$（。showButton）。on（click，function（）{$ b $ （。showButton clicked）;
$（this）.closest（tr）。find（：checkbox）。hide（）;
}）;
} ）;
}）;
< / script>
呈现CheckBox：
< td align =centerstyle =width：30px; display：block;>
将跨度类= mychk ROWID = 1 风格= 显示：块;高度：30像素; ><输入的ID = ctl00_ContentPlaceHolder1_GridView1_ctl02_chkSelect 类型= 复选框 名称=ctl00 $ ContentPlaceHolder1 $ $ GridView1 $ ctl02 chkSelect>< /跨度>
< / td>
网格中的呈现按钮：
< td align =centerstyle =width：70px; display：block;>
将输入类型= 提交 名称= ctl00 $ $ ContentPlaceHolder1 $ GridView1 $ ctl03 BtnSource 值= 源 的onclick =返回SetRowValues（6，this.id，222.0000,222.0000,222.0000,222.0000， 222.0000）; WebForm_DoPostBackWithOptions（新WebForm_PostBackOptions（安培; QUOT; ctl00 $ ContentPlaceHolder1 $ GridView1 $ ctl03 $ BtnSource&安培; QUOT;，&安培; QUOT;&安培; QUOT ;,真，&安培; QUOT;&安培; QUOT;，&安培; QUOT;&安培;，false，false））id =ctl00_ContentPlaceHolder1_GridView1_ctl03_BtnSourceclass =showButtonrowid =1style =>
< / td>
任何想法？
帮助赞赏！
解决方案
以下是我的完整解决方案：
< $ c $函数SetRowValues（id，controlid，fair，good，mint，nnew，poor，broken）{
var rowid = $（＃+ controlid）.attr（rowid）;
var chkBoxID;
var chkRowid;
$（'span.mychk'）。each（function（）{
chkBoxID = $（this）.attr（'id'）;
chkRowid = $（this）.attr（ 'rowid'）;
if（chkRowid == rowid）{
$（this）.hide（）;
$（this）.closest（td）。css（border ，none）;
}
else {
$（this）.show（）;
$（this）.closest（td）。css（边框，1px纯灰）;
}
}）;
返回false;
}
感谢所有..！ ：）
I have a GridView with CheckBox in first column and Button on SecondLast column. When user Clicks on Button the CheckBox of current row must be Invisible using Javascript.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true"
PageSize="100" AllowSorting="true" DataSourceID="sqlUsers" DataKeyNames="ttppcid"
Width="100%" OnRowCommand="GridView1_RowCommand" EmptyDataText="No Data Found"
OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField ItemStyle-Width="30px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" Visible="true">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" Height="30" class="mychk" rowid="<%# Container.DataItemIndex+1 %>" />
</ItemTemplate>
</asp:TemplateField>
//some more templates here
<asp:TemplateField HeaderText="" ItemStyle-Width="70px" ItemStyle-HorizontalAlign="Center"
HeaderStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="BtnSource" runat="server" Text="Source" rowid="<%# Container.DataItemIndex+1 %>"
class="showButton" OnClick='<%# "return SetRowValues("+Eval("ttppcid")+",this.id,"+Eval("Fair")+","+Eval("Good")+","+Eval("Mint")+","+Eval("Poor")+","+Eval("Fair")+")"%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Javascript:
function SetRowValues(id, controlid, fair, good, mint, nnew, poor, broken) {
var rowid = $("#" + controlid).attr("rowid");
var chkBoxID;
var chkRowid;
$('.mychk').css("display", "block");
$('.mychk').each(function() {
chkBoxID = this.id;
alert(chkBoxID);
chkRowid = $("#" + chkBoxID).attr("rowid");
alert(chkBoxID + " ROW :" + chkRowid);
if (chkRowid == rowid) {
$("#" + chkBoxID).css("display", "none");
}
else {
$("#" + chkBoxID).css("display", "block");
}
});
return false;
}
All works fine just here in alert i get empty. NOT able to get the ID of the CheckBox Control
Also Tried With:
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$(".showButton").on("click", function() {
alert(".showButton clicked");
$(this).closest("tr").find(":checkbox").hide();
});
});
});
</script>
Rendered CheckBox:
<td align="center" style="width: 30px; display: block;">
<span class="mychk" rowid="1" style="display: block; height: 30px;"><input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_chkSelect" type="checkbox" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$chkSelect"></span>
</td>
Rendered Button in Grid:
<td align="center" style="width: 70px; display: block;">
<input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl03$BtnSource" value="Source" onclick="return SetRowValues(6,this.id,222.0000,222.0000,222.0000,222.0000,222.0000);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$GridView1$ctl03$BtnSource", "", true, "", "", false, false))" id="ctl00_ContentPlaceHolder1_GridView1_ctl03_BtnSource" class="showButton" rowid="1" style="">
</td>
Any Idea?
Help Appreciated!
解决方案
Here is my Complete Solution:
function SetRowValues(id, controlid, fair, good, mint, nnew, poor, broken) {
var rowid = $("#" + controlid).attr("rowid");
var chkBoxID;
var chkRowid;
$('span.mychk').each(function() {
chkBoxID = $(this).attr('id');
chkRowid = $(this).attr('rowid');
if (chkRowid == rowid) {
$(this).hide();
$(this).closest("td").css("border","none");
}
else {
$(this).show();
$(this).closest("td").css("border", "1px solid grey");
}
});
return false;
}
Thanks to all..! :)
这篇关于如何隐藏使用Javascript从GridView选定的行的复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
