使用JS实现将GridView中的TextBox列的值博给GridView外的一个文本筐
实现在GridView中的TextTextBox列中的Textbox每添加一值,在该TextBox失去焦点时,
GridView外面的TextBox自动添加该GridView中Textbox列中的TextBox添加的值,并过滤输入不是数字的情况
效果如图:
已知【薪酬总额】的文本筐解析后<input type="text" name="txtAllValue" id="txtAllValue" />
GridView中的TextBox模板列的id="txtones"( 非解析的id ),GridView解析后成的table id="tbGridViews";
在GridView的RowDataBind事件中:加如下代码
private void GridView_RowDataBoind( object sender , EventArgs e )
{
if ( e.Row.RowType==DataControlRowType.DataRow)
{
TextBox tboxone = e.Row.FindControl("txtones") as TextBox ;
if ( tboxone != null )
{
tboxone.Attribute.Add( " onfocus " , " GetAllValues(); ") ; // 模板中的TextBox添加获得焦点JS事件
}
}
}
前台JS代码实现如下
< script type="text/javascript">
Function GetAllValues()
{
var tbGridView = document.getElementById( " tbGridViews" ) ; // 得到解析GridVeiw的table
if( tbGridView )
{
var oInput =tbGridView.getElementsByTagName( " input " ) ; // 得到解析GridView的table中的所有input元素
var Lastvalue = 0;
for ( int i=0 ; i < oInput.Length ; i++) // 遍历解析GridView的table中包含所有input元素的变量
{
if( oInput[i].type == "text ") // 判断GridView解析后的table中的input元素是否是text 文本筐
{
var oValue = oInput[i].value ; // 得到文本筐的值
if ( oValue =="" || isNaN ( oValue )) // 当文本筐的值为空或非数字时,默认该文本筐的值为0
oValue = 0;
else
oValue=parseFloat( oValue ) ;
LastValue + = oValue ;
}
}
var allText = document.getElementById( " txtAllValue ") ; // 得到薪酬总额文本筐
if ( allText )
{
allText.value = LastValue ; // 为薪酬总额文本筐博值
}
}
}
为了合用户在GridView的TextBox模板中的TextBox输入的值为数字且大于0。首先编辑模板,在该模板中添加一个CompareValidator验证控件,
设置其Text=“*”,ToolTip="请输入有效的数字" ,Operator ="GreaterThan" , ValueToCompare="0",Type="Double" ;
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!