如何使用javascript计算多个datagrid列中的字符 [英] How to count characters in multiple datagrid columns using javascript
本文介绍了如何使用javascript计算多个datagrid列中的字符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
伙计，
我保证与有兴趣的人一起分享解决方案8-）！在此先感谢。
环境：VS 2008，.NET 3.5。
我有以下内容带有RowNbr，LastName，FirstName，MiddleName，NameFormat和CharsLeft的用户控件上的 datagrid ，共5行：
< asp：Panel ID = Panel1 runat = < span class =code-keyword> server >
< asp：表 ID = 表1 runat = server >
< asp：TableRow ID = TableRow1 runat = 服务器 >
< asp：TableCell ID = TableCell1 runat = server ColumnSpan = 6 >
< asp：DataGrid runat = server ID = dgNames AutoGenerateColumns = 错误 >
< 列 >
< asp：BoundColumn DataField = RowNbr HeaderText = 行＃ >
< / asp：BoundColumn >
< asp：TemplateColumn HeaderText = 姓氏 >
< ItemTemplate >
< span class =code-keyword>< asp：TextBox runat = server ID = txtLastName 列 = < span class =code-keyword> 18 文本 =' <％ #DataBinder.Eval（Container， DataItem.LastNam e）％> ' > < / asp：TextBox >
< span class =code-keyword>< / ItemTemplate >
< / asp：TemplateColumn >
< asp：TemplateColumn HeaderText = 名字 >
< ItemTempl ate >
< asp：TextBox runat = server ID = txtFirstName 列 = 18 文本 =' <％＃DataBinder.Eval（Container， DataItem.FirstName）％> ' > < / asp：TextBox < span class =code-keyword>>
< / ItemTemplate >
< / asp： TemplateColumn >
< asp：TemplateColumn HeaderText = 中间名 >
< ItemTemplate >
< asp：TextBox runat = server ID = txtMiddleName 列 = 18 文字 =' <％ #DataBinder.Eval（Container， DataItem.MiddleName）％> ' > < / asp：TextBox >
< / ItemTemplate >
< / asp：TemplateColumn >
< asp：TemplateColumn HeaderText = 名称格式 ItemStyle-Wrap = false >
< ItemTemplate >
< asp：标签 runat = server ID = lblNameFormat > < / asp：Label >
< / ItemTemplate > ;
< / asp：TemplateColumn & gt;
< asp：TemplateColumn HeaderText = 字符。左 ItemStyle-Wrap = false >
< ; ItemTemplate >
< asp：标签 runat = server ID = lblCharsLeft > < / asp：Label >
< / ItemTemplate >
< / asp：TemplateColumn >
< /列 >
< / asp：DataGrid >
< / asp：TableCell >
< / asp：TableRow >
< / asp：Table <跨度class =code-keyword>>
< / asp：Panel >
对于5行中的每一行：
1）NameFormat列显示为LastName / FirstName / MiddleName
2）所有名称的长度组合必须小于或等于30个字符
3）任何列（LastName / FirstName / MiddleName）可以是任何长度，只要总计数小于或等于30
4）CharsLeft列显示的数量剩下的字符，从30减去，例如剩下6/30，如果LastName / FirstName / MiddleName组合的长度= 24
我试着无济于事：
添加OP意味着]我的意思是有时候应用程序。只是在我身上崩溃，有时它会在我必须停止之前搅拌几分钟，有时在NameFormat和CharsLeft列上没有反映任何变化[/ EDIT]
尝试A）
第1行:(我为剩下的4行重复这个）：
$（文件）.ready（function（ ）{
$（'＃<％= dgNames.ClientID％> tr：has（td）'）。each（function（）{
var parentGrid = document.getElementById（'＃< ％= dgNames.ClientID％>'）;
var trTableRow = parentGrid.getElementsByTagName（'TR'）[1];
var tcLastName = trTableRow.getElementByTagName（'TD'）[ 1];
var txtLastName = tcLastName.innerText;
var tcFirstName = trTableRow.getElementByTagName（'TD'）[2];
var txtFirstName = tcFirstName.innerText;
var tcMiddleName = trTableRow.getElementByTagName（'TD'）[3];
var txtMiddleName = tcMiddleName.innerText;
var lblNameFormat = trTableRow.getElementByTagName（'TD'）[4];
var lblCharsLeft = trTableRow.getElementByTagName（'TD'）[5];
lblNameFormat.text（txtLastName +'/'+ txtFirstName +'/'+ txtMiddleName）;
var remainingChars = 30 - （txtLastName.val（）。length + txtFirstName.val（）。length + txtMiddleName.val（）。length）;
lblCharsLeft.text（remainingChars +'/ 30'）;
}）;
}）;
尝试B）
$（文件）.ready （function（）{
$（'＃<％= dgNames.ClientID％> tr：has（td）'）。each（function（）{
var txtLastName = document.getElementById（ <％= dgNames.ClientID％>）。rows [1] .cells [1] .innerText;
var txtFirstName = document.getElementById（<％= dgNames.ClientID％>）。 rows [1] .cells [2] .innerText;
var txtMiddleName = document.getElementById（<％= dgNames.ClientID％>）。rows [1] .cells [3] .innerText;
var lblNameFormat = document.getElementById（<％= dgNames.ClientID％>）。rows [1] .cells [4];
var lblCharsLeft = document.getElementById（<％= dgNames.ClientID％>）。rows [1] .cells [5];
lblNameFormat.text（txtLastName +'/'+ txtFirstName +'/'+ txtMiddleName）;
var remainingChars = 30 - （txtLastName.val（）。length + txtFirstName.val（）。length + txtMiddleName.val（）。length）;
lblCharsLe ft.text（remainingChars +'/ 30'）;
}）;
}）;
尝试C）
第1行:(我在剩余的4行中重复此操作）：
$（document）.ready（function（）{
$（＃<％= dgNames.ClientID％> input [id * = 'txtLastName']：txtLastName.ClientID]）。keyup（function（）{
$（＃<％= dgNames.ClientID％> input [id * ='lblNameFormat']：lblNameFormat.ClientID] ）。text
（
$（＃<％= dgNames.ClientID％> input [id * ='txtLastName']：txtLastName.ClientID）。val（）+'/' +
$（＃<％= dgNames.ClientID％> input [id * ='txtFirstName']：txtFirstName.ClientID]）。val（）+'/'+
$（ ＃<％= dgNames.ClientID％> input [id * ='txtMiddleName']：txtMiddleName.ClientID]）。val（）
）;
$（＃ <％= dgNames.ClientID％> input [id * ='lblCharsLeft']：lblCharsLeft.ClientID]）。text
（
$（＃<％= dgNames.ClientID％> ; input [id * ='txtLastName']：txtLastName.ClientI D）。val（）。length +
$（＃<％= dgNames.ClientID％> input [id * ='txtFirstName']：txtFirstName.ClientID]）。val（）。length +
$（＃<％= dgNames.ClientID％> input [id * ='txtMiddleName'] ：txtMiddleName.ClientID]）。val（）。length
）;
}）;
}）;
解决方案
（document）.ready（function（）{
（'＃<％= dgNames.ClientID％> tr：has（td ）'）。each（function（）{
var parentGrid = document.getElementById（'＃<％= dgNames.ClientID％>'）;
var trTableRow = parentGrid.getElementsByTagName（'TR' ）[1];
var tcLastName = trTableRow.getElementByTagName（'TD'）[1];
var txtLastName = tcLastName.innerText;
var tcFirstName = trTableRow.getElementByTagName（'TD'）[2];
var txtFirstName = tcFirstName.innerText;
var tcMiddleName = trTableRow.getElementByTagName（'TD'）[3];
var txtMiddleName = tcMiddleName.innerText;
var lblNameFormat = trTableRow.getElementByTagName（'TD'）[4];
var lblCharsLeft = trTableRow.getElementByTagName（'TD'）[5];
lblNameFormat.text（txtLastName +'/'+ txtFirstName +'/'+ txtMiddleName）;
var remainingChars = 30 - （txtLastName.val（）。length + txtFirstName.val（）。length + txtMiddleName.val（）。length）;
lblCharsLeft.text（remainingChars +'/ 30'）;
}）;
}）;
尝试B）
（文件）。就绪（函数（）{
Folks,
I promise to share the solution with as many people as there are interested parties 8-)! Thanks in advance.
Env.: VS 2008, .NET 3.5.
I have the following datagrid on a user control with RowNbr, LastName, FirstName, MiddleName, NameFormat and CharsLeft, in 5 rows:
<asp:Panel ID="Panel1" runat="server">
<asp:Table ID="Table1" runat="server">
<asp:TableRow ID="TableRow1" runat="server">
<asp:TableCell ID="TableCell1" runat="server" ColumnSpan="6">
<asp:DataGrid runat="server" ID="dgNames" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="RowNbr" HeaderText="Row#">
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="Last Name">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtLastName" Columns="18" Text='<%# DataBinder.Eval(Container, "DataItem.LastName") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="First Name">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtFirstName" Columns="18" Text='<%# DataBinder.Eval(Container, "DataItem.FirstName") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Middle Name">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtMiddleName" Columns="18" Text='<%# DataBinder.Eval(Container, "DataItem.MiddleName") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Name Format" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:Label runat="server" ID="lblNameFormat"></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Chars. Left" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:Label runat="server" ID="lblCharsLeft"></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:Panel>
For each of the 5 rows:
1) The NameFormat column displays as LastName/FirstName/MiddleName
2) The combination of the lengths of all names has to be less than or equal to 30 characters
3) Any column (LastName/FirstName/MiddleName) can be any length for as long as the total count is less than or equal to 30
4) The CharsLeft column displays the number of characters left, subtracted from 30, e.g. 6/30 left, if the lengths of LastName/FirstName/MiddleName combined = 24
I tried to no avail:
[EDIT] Added what OP means] I mean sometimes the app. simply crashes on me, sometimes it churns for several minutes before I have to stop it and sometimes no changes are reflected on the NameFormat and CharsLeft columns at all[/EDIT]
Attempt A)
Row 1: (I repeated this for the remain ing 4 rows):
$(document).ready(function(){
$('#<%= dgNames.ClientID%> tr:has(td)').each(function(){
var parentGrid = document.getElementById('#<%= dgNames.ClientID %>');
var trTableRow = parentGrid.getElementsByTagName('TR')[1];
var tcLastName = trTableRow.getElementByTagName('TD')[1];
var txtLastName = tcLastName.innerText;
var tcFirstName = trTableRow.getElementByTagName('TD')[2];
var txtFirstName = tcFirstName.innerText;
var tcMiddleName = trTableRow.getElementByTagName('TD')[3];
var txtMiddleName = tcMiddleName.innerText;
var lblNameFormat = trTableRow.getElementByTagName('TD')[4];
var lblCharsLeft = trTableRow.getElementByTagName('TD')[5];
lblNameFormat.text(txtLastName + '/' + txtFirstName + '/' + txtMiddleName);
var remainingChars = 30 - (txtLastName.val().length + txtFirstName.val().length + txtMiddleName.val().length);
lblCharsLeft.text(remainingChars + '/30');
});
});
Attempt B)
$(document).ready(function(){
$('#<%= dgNames.ClientID%> tr:has(td)').each(function(){
var txtLastName = document.getElementById("<%= dgNames.ClientID %>").rows[1].cells[1].innerText;
var txtFirstName = document.getElementById("<%= dgNames.ClientID %>").rows[1].cells[2].innerText;
var txtMiddleName = document.getElementById("<%= dgNames.ClientID %>").rows[1].cells[3].innerText;
var lblNameFormat = document.getElementById("<%= dgNames.ClientID %>").rows[1].cells[4];
var lblCharsLeft = document.getElementById("<%= dgNames.ClientID %>").rows[1].cells[5];
lblNameFormat.text(txtLastName + '/' + txtFirstName + '/' + txtMiddleName);
var remainingChars = 30 - (txtLastName.val().length + txtFirstName.val().length + txtMiddleName.val().length);
lblCharsLeft.text(remainingChars + '/30');
});
});
Attempt C)
Row 1: (I repeated this for the remaining 4 rows):
$(document).ready(function(){
$("#<%= dgNames.ClientID %> input[id*='txtLastName']:txtLastName.ClientID]").keyup(function(){
$("#<%= dgNames.ClientID %> input[id*='lblNameFormat']:lblNameFormat.ClientID]").text
(
$("#<%= dgNames.ClientID %> input[id*='txtLastName']:txtLastName.ClientID").val() + '/' +
$("#<%= dgNames.ClientID %> input[id*='txtFirstName']:txtFirstName.ClientID]").val() + '/' +
$("#<%= dgNames.ClientID %> input[id*='txtMiddleName']:txtMiddleName.ClientID]").val()
);
$("#<%= dgNames.ClientID %> input[id*='lblCharsLeft']:lblCharsLeft.ClientID]").text
(
$("#<%= dgNames.ClientID %> input[id*='txtLastName']:txtLastName.ClientID").val().length +
$("#<%= dgNames.ClientID %> input[id*='txtFirstName']:txtFirstName.ClientID]").val().length +
$("#<%= dgNames.ClientID %> input[id*='txtMiddleName']:txtMiddleName.ClientID]").val().length
);
});
});
解决方案
(document).ready(function(){
('#<%= dgNames.ClientID%> tr:has(td)').each(function(){ var parentGrid = document.getElementById('#<%= dgNames.ClientID %>'); var trTableRow = parentGrid.getElementsByTagName('TR')[1]; var tcLastName = trTableRow.getElementByTagName('TD')[1]; var txtLastName = tcLastName.innerText; var tcFirstName = trTableRow.getElementByTagName('TD')[2]; var txtFirstName = tcFirstName.innerText; var tcMiddleName = trTableRow.getElementByTagName('TD')[3]; var txtMiddleName = tcMiddleName.innerText; var lblNameFormat = trTableRow.getElementByTagName('TD')[4]; var lblCharsLeft = trTableRow.getElementByTagName('TD')[5]; lblNameFormat.text(txtLastName + '/' + txtFirstName + '/' + txtMiddleName); var remainingChars = 30 - (txtLastName.val().length + txtFirstName.val().length + txtMiddleName.val().length); lblCharsLeft.text(remainingChars + '/30'); }); });
Attempt B)
(document).ready(function(){
这篇关于如何使用javascript计算多个datagrid列中的字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
