如何在ListView中获取文本框的值并在javascript中执行计算 [英] how do I get values of textbox in listview and perform calculations in javascript

问题描述

我想对我的列表视图中的每一行进行总计

统计感染者总数和百分比
____________________________________________________________________
CityID |城市|人口|男|女|总计|百分比|

人口，男性和女性列是用户输入
总列为每行的男性+女性文本框值
百分比=(总数/人口)*每行也为100
计算每次文本更改的总数和百分比

这是我的html代码:

I want to total every row from my listview

tallies total infected people and percentage
____________________________________________________________________
CityID | City | Population | Male | Female | Total | Percentage |

Population, male, and female columns are user inputs
total column is male+female textbox value per row
percentage= (total/population)*100 also per row
to calculate total and percentage on every textchange

here is my html code:

<asp:ListView ID="ListView1" runat="server">
   <LayoutTemplate>
      <table style="border: solid 2px #336699;" cellspacing="0" cellpadding="3" rules="all">
         <tr style="background-color: #336699; color: White;">

            <th>City</th>
            <th>Population</th>
            <th>Male</th>
            <th>Female</th>
            <th>Total</th>
            <th>%</th>
         </tr>
         <tbody>
            <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
         </tbody>
      </table>
   </LayoutTemplate>
   <ItemTemplate>
      <tr>
        <td> <asp:Label ID="lblCtyID" runat="server" Text='<%# Bind("CityID") %>' /> </td>
        <td> <asp:Label ID="lblCty" runat="server" Text='<%# Bind("CityName") %>'/> </td>
         <td><asp:TextBox ID="txtPopu" runat="server"/></td>
         <td>
         <asp:TextBox ID="txtMale" runat="server" Width="69px" ValidationGroup="check"/>
         <asp:RegularExpressionValidator ID="RegularExpressionValidator1" Display="Dynamic" runat="server" ForeColor="Maroon" SetFocusOnError="True" ControlToValidate="txtMale" ErrorMessage="X" ValidationExpression="[0-9]*" ValidationGroup="check"></asp:RegularExpressionValidator>
         </td>
         <td><asp:TextBox ID="txtFemale" runat="server" Width="69px" onpaste = "return false;" onkeyup ="keyUP(event.keyCode)" onkeydown = "return isNumeric(event.keyCode);"/></td>
         <td><asp:TextBox ID="txtTotal" runat="server" enabled="false" Width="85px"/></td>
         <td><asp:TextBox ID="txtPercent" runat="server" enabled="false" Width="85px"/></td>

      </tr>
   </ItemTemplate>
</asp:ListView>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Save Info"

            Width="136px" />
<br />
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"

            ConnectionString="<%$ ConnectionStrings:GeraldConnString2 %>"

            SelectCommand="SELECT [CityID], [CityName] FROM [Cities]"></asp:SqlDataSource>

推荐答案

ConnectionStrings:GeraldConnString2 ％> " =" 从[城市]中选择[CityID]，[CityName]" < /asp:SqlDataSource >

ConnectionStrings:GeraldConnString2 %>" SelectCommand="SELECT [CityID], [CityName] FROM [Cities]"></asp:SqlDataSource>

您可以通过编写以下javascript功能来解决上述功能.

在文本框的onkeypress事件中，在人口"，男性"和女性"列中调用以下函数，如下所示.

Hi,

You can solve the above function by writing following javascript fucntion.

Call the below function in Population, male, and female columns on onkeypress event of text boxes as follows.

onkeypress="javascript:return CalculateValue(this);";

function CalculateValue(obj)
{
    var tr=obj.parentNode.parentNode //get the entered row object.
    var txt1=tr.cells[2].getElementByTagName("INPUT")[0] //population textbox

    var txt2=tr.cells[3].getElementByTagName("INPUT")[0] //male textbox
    var txt3=tr.cells[4].getElementByTagName("INPUT")[0] //female textbox
    var txt4=tr.cells[5].getElementByTagName("INPUT")[0] //total textbox
    var txt5=tr.cell[6].getElementByTagName("INPUT")[0] //percentage textbox

txt4.value=parseInt(txt2.value) + parseInt(txt3.value); //total value calculation.

txt5.value= (parseInt(txt4.value) / parseInt(txt1.value)) * 100 //percentage calculation.

}

确保默认情况下，您的文本框必须为零.

问候，
Kiran.

Make sure that by default your textboxes need to have zero.

Regards,
Kiran.

<pre lang="Javascript">><<small><code><big><pre lang="Delphi"><pre lang="text"><pre lang="c++"><pre lang="HTML"><pre lang="Javascript">

这篇关于如何在ListView中获取文本框的值并在javascript中执行计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！