如何使用Javascript从Gridview中的文本框中获取文本值答案

【问题标题】：How to get the text value from textbox which is in Gridview using Javascript如何使用Javascript从Gridview中的文本框中获取文本值
【发布时间】：2012-04-12 09:23:28
【问题描述】：

大家好，我编写了以下脚本来从GridView 中的textbox 获取值，但我得到了一些值，因为NaN可以有人告诉我哪里出错了

这是我的示例脚本

var grid = document.getElementById("<%=grdInvoice.ClientID%>");
            var inputs = grid.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                if (inputs[i].type == "text") {
                    if (inputs[i].name.indexOf("txtAmount").value != "") {
                        alert("Not Null");
                        amnt = parseInt(inputs[i].name.indexOf("txtAmount").value);
                        alert(amnt.toString()); // Getting Nan here
                        //var v = document.getElementById('<%= lblTotal.ClientID %>').value;
                    }
                }
            }

我的网格如下

 ddl    Quantity  desc     Rate    Amount
        1         d        10      10
        2         d        20      40

像一些空行一样，我需要对 Amount 求和并显示

我的网格视图

<asp:GridView ID="grdInvoice" runat="server" AutoGenerateColumns="False" GridLines="None"
                        Width="650px" CellPadding="2" CellSpacing="1" ForeColor="#333333" CssClass="inv_grid_data"
                        OnSelectedIndexChanged="grdInvoice_SelectedIndexChanged" OnSelectedIndexChanging="grdInvoice_SelectedIndexChanging"
                        Style="font-family: verdana; font-size: 9px;">
                        <RowStyle BackColor="#f1f1f2" ForeColor="#333333" BorderColor="#333333" BorderStyle="Solid"
                            BorderWidth="1px" />
                        <HeaderStyle CssClass="inv_grid_hed" BackColor="#f2f2f2" ForeColor="black" Font-Names="Verdana,Arial,Helvetica,sans-serif"
                            Font-Size="9px" Height="15px" Font-Bold="false" />
                        <AlternatingRowStyle CssClass="tr2" BackColor="White" ForeColor="#284775" />
                        <Columns>
                            <asp:TemplateField HeaderText="Item Name" HeaderStyle-Width="140">
                                <ItemTemplate>
                                    <asp:DropDownList ID="ddlItems" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlItems_SelectedIndexChanged"
                                        DataTextField="LineItemName" DataValueField="LineItemName" CssClass="txt_box_ssm_drop"
                                        Width="100%" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="12px">
                                    </asp:DropDownList>
                                </ItemTemplate>
                                <HeaderStyle Width="180px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Quantity">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtQuantity" CssClass="txt_box_ssm_big" runat="server" Width="100%"></asp:TextBox>
                                </ItemTemplate>
                                <HeaderStyle Width="100px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Description">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtDescription" CssClass="txt_box_ssm_big" runat="server" Width="100%"></asp:TextBox>
                                </ItemTemplate>
                                <%--<ItemStyle Height="11px" Width="100px" /> --%>
                                <HeaderStyle Width="260px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Rate">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtRate" ReadOnly="true" CssClass="txt_box_ssm_big" runat="server"
                                        Width="100%"></asp:TextBox>
                                </ItemTemplate>
                                <HeaderStyle Width="100px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Amount">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtAmount" runat="server" CssClass="txt_box_ssm_big" Width="100%"></asp:TextBox>
                                    <%--<asp:Label ID="lblamount" runat="server" Text='<%# Eval("Amount") %>'/>--%>
                                </ItemTemplate>
                                <HeaderStyle Width="100px" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Delete">
                                <ItemTemplate>
                                    <%--<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/icon_delete.gif" OnClick="RowDelete_Click" OnClientClick="msg('Can you get there from here?','This is a Title')"/>--%>
                                    <asp:ImageButton ID="RowDelete" runat="server" ImageUrl="~/images/icon_delete.gif"
                                        OnClick="RowDelete_Click" OnClientClick="return showConfirm()" Style="margin-left: 15px;" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:CommandField ShowSelectButton="true" ButtonType="image" SelectImageUrl="~/Invoiceimages/Copy-32(1).png"
                                SelectText="Copy" HeaderText="Copy" />
                        </Columns>
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                        <EditRowStyle BackColor="#999999" />
                    </asp:GridView>

我的原始脚本最初我将根据用户数量在网格视图中添加 AMount 之后我想将网格中的总金额显示到标签中

<script type="text/javascript">
        function multiplication(txtQuantity, txtRate, txtAmount) {
            var weight = document.getElementById(txtQuantity).value;
            var rate = document.getElementById(txtRate).value;
            document.getElementById(txtAmount).value = weight * rate;
            var amnt = 0;
//            var Grid_Table = document.getElementById('<%= grdInvoice.ClientID %>');
//            for (var row = 1; row < Grid_Table.rows.length; row++) {

//                var qty = 0;

//                for (var col = 0; col < Grid_Table.rows[row].cells.length; col++) {

//                    var cellcollectin = Grid_Table.rows[row].cells[col];

//                    for (var j = 0; j < cellcollectin.childNodes.length; j++) {

//                        if (cellcollectin.childNodes[j].type == "text") {

//                            if (cellcollectin.childNodes[j].name.indexOf("txtAmount") > 1) {
//                                if (cellcollectin.childNodes[j].value != "") {
//                                    qty = parseInt(cellcollectin.childNodes[j].value);
//                                    amnt = amnt + qty;
//                                }
//                            }
//                        }
//                    }
//                }
//            }
                        var grid = document.getElementById("<%=grdInvoice.ClientID%>");
                        var inputs = grid.getElementsByTagName("input");
                        for (var i = 0; i < inputs.length; i++) {
                            if (inputs[i].type == "text") {
                                if (inputs[i].name.indexOf("txtAmount").value != "") {
                                    alert("Not Null");
                                    amnt = grid.rows[i].cells[1].childNodes[0].value;
                                    //amnt = parseInt(inputs[i].name.indexOf("txtAmount").value);
                                    alert(amnt.toString());
                                    //var v = document.getElementById('<%= lblTotal.ClientID %>').value;
                                }
                            }
                        }
            document.getElementById('<%= lblTotal.ClientID %>').innerHtml = amnt.toString();
        }
    </script>

【问题讨论】：

您可能会将字符串值解析为整数..这可能是原因
没有ParseInt 我没有收到任何警报
转换前，尝试提醒输入[i].name.indexOf("txtAmount").value
Undefined 如果我这样做，就会显示警报
这就是 NaN 的原因..因为您将 Undefined 解析为整数

标签： javascript asp.net gridview

【解决方案1】：

毕竟这里是解决方案

<script type="text/javascript">
    function multiplication(txtQuantity, txtRate, txtAmount) {
        var col1;
        var totalcol1 = 0;
        var weight = document.getElementById(txtQuantity).value;
        var rate = document.getElementById(txtRate).value;
        document.getElementById(txtAmount).value = weight * rate;
        var grid = document.getElementById('<%=grdInvoice.ClientID %>');


        for (i = 0; i < grid.rows.length; i++) {
            col1 = grid.rows[i].cells[4];
            //col2 = grid.rows[i].cells[1];

            for (j = 0; j < col1.childNodes.length; j++) {
                if (col1.childNodes[j].type == "text") {
                    if (!isNaN(col1.childNodes[j].value) && col1.childNodes[j].value != "") {
                        totalcol1 += parseInt(col1.childNodes[j].value)
                    }
                }
            }
        }
        document.getElementById('<%= lblTotal.ClientID %>').innerHTML = totalcol1.toFixed(2).toString();
    }
</script>

【讨论】：

【解决方案2】：

你的代码有问题，Javascript的indexOf()要么返回-1要么返回正整数，value是输入文本框的属性，与indexOf()无关。

用这个替换你的代码：

    var grid = document.getElementById("<%=grdInvoice.ClientID%>");
    var inputs = grid.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == "text") {
            if (inputs[i].name == "txtAmount" || inputs[i].id == "txtAmount") {
                amnt = parseInt(inputs[i].value);
                alert(amnt.toString());
            }
        }
    }

【讨论】：

我有一个带有gridview 的母版页，那么找到if (inputs[i].name == "txtAmount") 的正确方法是什么
如果你的文本框的 ID 被改变了，那么你必须先设置它的 ClientID：txtCtrl.ClinetID = "txtAmount"; 在浏览器中查看网页的 html 源代码并尝试找到 txtAmount 如果是不存在这意味着它的 ID 已更改。
如何在 javascript 中做到这一点
我已经发送如下curTexbox.Attributes.Add("onBlur", "return multiplication('" + curTexbox.ClientID + "','" + curTexbox1.ClientID + "',curTextbox2.ClientID");
1) 通过在标记中附加一个计数整数来使控件的 ID 唯一。 2) 在客户端代码中放置警报以查看所需文本框控件的 ID、值等。 3）查看我的更新答案。

【解决方案3】：

我认为您使用的方法是错误的。最好使用下面的东西：

var inputs = grid.getElementsByTagName("input");
var grid = document.getElementById('<%= grdInvoice.ClientID %>');

for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == "text") {         
        amnt = parseInt(grid.rows[i].cells[2].childNodes[0].value;);
        alert(amnt.toString()); // Getting Nan here
        //var v = document.getElementById('<%= lblTotal.ClientID %>').value;
    }
}

【讨论】：

没有一个值存在我想循环浏览网格视图中可用的文本框
你在哪里调用那个javascript函数..？
让我们continue this discussion in chat
这里有一个错字parseInt(grid.rows[i].cells[2].childNodes[0].value;);。去掉里面的分号;

【解决方案4】：

gridview 内的文本

    <asp:GridView ID ="grvAddItems" runat="server">
<asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox CssClass="field-text1"  Width="70 px" ID="txtQuantity" runat="server" TextMode="Number"  onblur="findcontrol()"></asp:TextBox>
            </ItemTemplate>
            </asp:TemplateField>
</asp:GridView>

Javascript 代码

    function findcontrol()
      {
          var textBoxQuantity = document.getElementsByClassName("field-text1");
for (var i = 0; i < textBoxQuantity.length; i++) {
              findvalue(textBoxQuantity[i].id);
          }
      }
function findvalue()
{
var Quantity = document.getElementById(quantity).value;
if (Number(Quantity) > 0){
// your calculations here
}

【讨论】：

除了发布代码之外，请解释您的代码。

【解决方案5】：

我认为这将很容易读取网格视图数据

function StatusValidation() {
var rowCount = <%=gvRoomStatus.Rows.Count%>; // set your grid view name
for (var i = 0; i < rowCount; i++) {
var checkBoxes = $("#ContentPlaceHolder1_gvRoomStatus_chkIsSavePermission_" +i).is(":checked");
if (checkBoxes == true) {
count++;
var ddlHKRoomStatus = $("#ContentPlaceHolder1_gvRoomStatus_ddlHKRoomStatus_" + i).val();
var fromDate = $("#ContentPlaceHolder1_gvRoomStatus_txtFromDate_" + i).val();
var fromTime = $("#ContentPlaceHolder1_gvRoomStatus_txtFromTime_" + i).val();
var toDate = $("#ContentPlaceHolder1_gvRoomStatus_txtToDate_" + i).val();
var toTime = $("#ContentPlaceHolder1_gvRoomStatus_txtToTime_" + i).val();
var reason = $("#ContentPlaceHolder1_gvRoomStatus_txtReason_" + i).val();
  if (ddlHKRoomStatus == "3" || ddlHKRoomStatus == "4") {
       if (fromDate == "") {
       toastr.warning("Please provide From Date");
       $("#ContentPlaceHolder1_gvRoomStatus_txtFromDate_" + i).focus();
       return false;
                            }
                            else if (fromTime == "") {
                                toastr.warning("Please provide From Time");
                                $("#ContentPlaceHolder1_gvRoomStatus_txtFromTime_" + i).focus();
                                return false;
                            }
                            else if (toDate == "") {
                                toastr.warning("Please provide To Date");
                                $("#ContentPlaceHolder1_gvRoomStatus_txtToDate_" + i).focus();
                                return false;
                            }
                            else if (toTime == "") {
                                toastr.warning("Please provide To Time");
                                $("#ContentPlaceHolder1_gvRoomStatus_txtToTime_" + i).focus();
                                return false;
                            }
                            else if (reason == "") {
                                toastr.warning("Please provide a valid reason");
                                $("#ContentPlaceHolder1_gvRoomStatus_txtReason_" +i).focus();
                                return false;
                            }
                        }
                        

                    }
}

<!-- begin snippet: js hide: false console: true babel: false -->

【讨论】：