使用 javascript 查找放置在网格视图中的复选框和文本框
本文关键字:复选框 文本 视图 网格 查找 javascript 使用 | 更新日期: 2023-09-27 17:58:29
我想获取放置在网格视图中的复选框的值。 如果选中复选框,则该行中的文本框应为启用,如果再次取消选中,则应清除并禁用文本框。几个小时前我问了这个问题,但仍然没有得到满意的答案。我试过这样。
我的网格代码。
<asp:GridView ID="DeptGrid" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="DeptId" HeaderText="ID"/>
<asp:BoundField DataField="DeptName" HeaderText="Department"/>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="addToCompanyBox" onClick="EnableHODBox()" runat="server" />
</ItemTemplate>
<HeaderTemplate>
Add
</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="hodNameBox" runat="server" Width="200px" Enabled="false"></asp:TextBox>
</ItemTemplate>
<HeaderTemplate>
Dept Head
</HeaderTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
//我的 JavaScript 代码
<script type="text/javascript">
function EnableHODBox() {
//alert('hello');
var GridView = document.getElementById('<%=DeptGrid.ClientID %>');
//var GridView = document.getElementById('');
var DeptId;
if (GridView.rows.length > 0) {
for (Row = 1; Row < GridView.rows.length; Row++) {
// DeptId = GridView.rows.cell[0];
if (GridView.rows[Row].cell[3].type == "checkbox")
// var chkbox = GridView.rows[Row].cell[3].type == "checkbox"
(GridView.rows[Row].cell[3].type).checked = true;
}
}
}
</script>
此解决方案经过测试,仅使用 JavaScript
即可工作(此解决方案不需要jQuery
!
1. C# 部分(Page_Load
方法中(
Page_Load
我们需要添加一个小技巧:
foreach(GridViewRow row in YourGridViewControlID.Rows)
{
if (row.RowType == DataControlRowType.DataRow )
{
((CheckBox) row.FindControl("YourCheckBoxID")).Attributes.Add("onchange", "javascript:TextboxAutoEnableAndDisable(" + (row.RowIndex ) + ");");
}
}
这样,我们就在GridView
的每个CheckBox
的OnChange
事件中添加了 JavaScript 函数调用。特殊之处在于,我们无法通过HTML
实现的是,我们正在 JavaScript 函数中传递每个函数的Row Index
,这是我们稍后需要的。
2. HTML部分的一些重要注意事项
确保 Checkbox
控件和Textbox
控件,但更重要的是,您的 GridView
控件具有静态 id,请使用下面所示的ClientIDMode="Static"
:
<asp:CheckBox ID="YourCheckBoxID" runat="server" ClientIDMode="Static"/>
<asp:TextBox ID="YourTextBoxID" TextMode="SingleLine" runat="server" ClientIDMode="Static" />
对于GridView
控制:
<asp:GridView ID="YourGridViewControlID" ...... ClientIDMode="Static" runat="server">
3. 脚本部分
然后在你的 JavaScript 文件/代码中:
function TextboxAutoEnableAndDisable(Row) {
// Get current "active" row of the GridView.
var GridView = document.getElementById('YourGridViewControlID');
var currentGridViewRow = GridView.rows[Row + 1];
// Get the two controls of our interest.
var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];
// If the clicked checkbox is unchecked.
if( rowCheckbox.checked === false) {
// Empty textbox and make it disabled
rowTextBox.value = "";
rowTextBox.disabled = true;
return;
}
// To be here means the row checkbox is checked, therefore make it enabled.
rowTextBox.disabled = false;
}
4. 上述实现的一些注意事项
- 请注意,在
- JavaScript 代码中,在以下行:
var currentGridViewRow = GridView.rows[Row + 1];
[Row + 1]
对于完成这项工作很重要,不应更改。 - 最后:
以下行:
var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];
.cells[2]
和.cells[0]
对您来说可能不同,因此您必须在[]
中选择正确的数字。
通常,这将是从0
开始计数的GridView
的列号。
因此,如果你的CheckBox
位于 GridView 的第一列中,则需要.cells[0]
。
如果您的TextBox
在GridView
的第二列中,那么您需要.cells[1]
(在我上面的情况下,TextBox
在我的GridView
的第三列中,因此,我使用了.cells[2]
(
onclick
JavaScript代替OncheckedChanged
事件,后者是CheckBox服务器端事件。
<asp:CheckBox ID="CheckBox2" runat="server" onclick="Javascript:JSfunctionName();" />
编辑:
var GridView = document.getElementById('<%=DeptGrid.ClientID %>')
编辑:根据您的要求在评论中
if (GridView.rows[Row].cell[2].type == "checkbox")
{
if (GridView.rows[Row].cell[2].childNodes[0].checked)
{
GridView.rows[Row].cell[3].childNodes[0].disabled=false;// Enable your control here
}
}
== "checkbox"(导致错误,GridView.rows[Row].cell[2].type未定义。 我现在运行的代码如下:
var grid = document.getElementById('<%=grdResults.ClientID%>');
if (grid.rows.length > 0) {
for (row = 1; row < grid.rows.length; row++) {
if (grid.rows[row].cells[0].childNodes[0].checked) {
// do something here
alert('function for row ' + row);
}
}
你可以像这样定义你的网格:
<div>
<asp:GridView ID="GridView1" runat="server" Width = "550px"
AutoGenerateColumns = "false" Font-Names = "Calibri"
Font-Size = "12pt" HeaderStyle-BackColor = "LightYellow" AllowPaging ="true" ShowFooter = "true" OnPageIndexChanging = "OnPaging" PageSize = "10" >
<Columns>
<asp:TemplateField ItemStyle-Width = "100px" HeaderText = "Name">
<ItemTemplate>
<asp:TextBox ID="txtPeriod" runat="server" CssClass="css1 mycss" Text='<%# Eval("Period")%>'
onblur="SetPostingPeriod(this)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle BackColor="#C2D69B" />
</asp:GridView>
</div>
你的Javascript函数将是:
<script language="javascript" type="text/javascript">
/* Populating same data to all the textboxes inside grid,
once change of text for one textbox - by using jquery
*/
function SetPostingPeriod(obj) {
var cntNbr = $("#" + obj.id).val();
// var cntNbr = document.getElementById(obj.id).value;
// alert(cntNbr);
//Access Grid element by using name selector
$("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {
if ($.trim($(this).val()) != "")
if (!isNaN($(this).val())) {
$(this).val(cntNbr);
}
});
}
</script>
这个Javascript函数被称为文本框的onblur事件。 当同时调用此函数时,它会传递一个参数 它只不过是文本框 ID。
在javascript函数中,通过使用参数,该参数是文本框的 ID,我们正在获得 vaue。
这是代码:
var cntNbr = $("#" + obj.id).val();
然后对于网格内可用的每个"txtPeriod"控件,我们需要分配 当前"txtPeriod"文本框的值。
循环网格以识别每个可用的"txtPeriod": 这是代码:
$("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) {
});
在这个循环中,我们需要将"txtPeriod"(当前/修改(值分配给其他 "txtPeriod"文本框。在分配其良好做法之前,请检查它是空还是 NAN。 这是代码:
if ($.trim($(this).val()) != "")
if (!isNaN($(this).val())) {
$(this).val(cntNbr);
}
这里有非常简单的解决方案
假设你的网格是这样的:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Height="64px"
Width="389px" EnableViewState="False">
<Columns>
<asp:TemplateField HeaderText="EmployeeId">
<ItemTemplate>
<asp:Label ID="lblEmployeeId" runat="server" Text=""></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FirstName">
<ItemTemplate>
<asp:Label ID="lblFirstName" runat="server" Text=""></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName">
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text=""></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#FF66FF" ForeColor="#660033" />
</asp:GridView>
你的JavaScript在你的网格中查找控件是
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#btnAddToGrid").click(function () {
var $grid = $('#<%=GridView1.ClientID %>');
var $row = $grid.find('tr:last').clone().appendTo($grid);
var employeeId = $row.find("span[id*='lblEmployeeId']").text();
var firstname = $row.find("span[id*='lblFirstName']").text();
var lastname = $row.find("span[id*='lblLastName']").text();
alert("ID :" + employeeId +"'n" + "Name :" + firstname +" "+ lastname );
});
});
</script>
使用 java 脚本在网格内查找控件:
for (var r = 1; r < grid.rows.length; ++r) {
var indexValue = 0; //based on browser. //IE8
var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue];
if (typeof (txtPeriod.value) == "undefined")//IE9
indexValue = 1
var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue];
alert(txtPeriod.value);
}
var x = document.getElementById('<%=grdResults.ClientID%>').querySelectorAll("input");
var i;
var cnt = 0;
for (i = 0; i < x.length; i++) {
if(x[i].type== "checkbox" && x[i].checked)
cnt++;
}
alert("item selected=" + cnt);