LISTVIEWの値をJavaScriptで取得したい

Question

windows10ローカル環境
iis+vs2017(asp.net webフォーム)で開発しています。

下記はリストビューで生成されたHTMLデータです。
行数は３００行ほどありますが、1行目のみサンプルで記載しました
ボタンを押すとリストビューを行数分ループして数量１の合計を取得したいのですが、
text1 がundefinedになってしまいます。

何が悪いでしょうか。。

<div id="ContentPlaceHolderContent_grp3" class="table-responsive">
  <table id="tbl" border="0" class="table table-bordered table-hover table-striped table-hgroup scroll1 ">
    <thead class="scrollHead">

      <tr style="">
        <th class="c1">商品</th>
        <th class="c2">サイズ</th>
        <th class="c3">数量１</th>
      </tr>
    </thead>

    <tbody class="scrollBody">
      <tr style="">
        <td class="c1">
          <span id="ContentPlaceHolderContent__listView_itemLabel_0">商品１</span>
        </td>
        <td class="c2">
          <span id="ContentPlaceHolderContent__listView_lotLabel_0">Lサイズ</span>
        </td>
        <td class="c3">
          <input name="ctl00$ContentPlaceHolderContent$_listView$ctrl0$priceLabel1" type="text" value="840" id="priceLabel1" disabled="disabled" class="aspNetDisabled" style="width:80px;">
        </td>
        
      </tr>

    </tbody>
  </table>
</div>

     var listview = document.getElementById("tbl");

     for (var i = 1; i < listview.rows.length; i++) 
           var cell1 = listview.rows[i].cells[0];
    	   alert('cell-'+cell1);

	       var span1 = cell1.children;
           alert('span-' + span1);

           var text1 = span1.innerHTML;
	       alert(text1);			
      }

Answer 1

サーバー側で処置してはいかがでしょう？

GridView, ListView に合計表示
http://surferonwww.info/BlogEngine/post/2010/11/07/Show-sum-in-GridView-or-ListView.aspx

それがダメな理由があれば詳しく書いてください。

【追記】

下のコメントに「両方作って比較しないことには判断できないと思いますので、JavaScript / jQuery 案を回答欄に追記しておきます」と書きましたがそれを以下に書いておきます。

ベースは上の回答で紹介した記事のコードで、それに手を加えたものです。コードの下の方にあるの合計を計算して表示するスクリプトです。

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" 
    AutoEventWireup="true" CodeFile="0068-ListViewTotalByJavascript.aspx.cs" 
    Inherits="_0068_ListViewTotalByJavascript" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <style type="text/css">
        table.style1
        {
            border-style: solid;
            border-width: 2px;
            border-color: Black;
            text-align: center;
            border-collapse: collapse;
        }
       
        table.style1 th
        {
            border-style: solid;
            border-width: 2px 1px 2px 1px;
            border-color: Black;
            background-color: #6699FF;
            color: #FFFFFF;
        }
        
        table.style1 td
        {
            border-style: solid;
            border-width: 1px;
            border-color: Black;        
        }
        
        .footer
        {
            background-color: #CCFFFF;
        }  
    </style>
    
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <h3>Alfreds Futterkiste</h3>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
      ConnectionString="<%$ ConnectionStrings:NORTHWINDConnectionString %>" 
      SelectCommand="SELECT [OrderID], [OrderDate], [Freight] 
        FROM [Orders] 
        WHERE [CustomerID]='ALFKI'">            
    </asp:SqlDataSource>
    <asp:ListView ID="ListView1" 
      runat="server" 
      DataKeyNames="OrderID" 
      DataSourceID="SqlDataSource1" 
      EnableModelValidation="True" >
      <ItemTemplate>
        <tr>
          <td>
            <asp:Label ID="OrderIDLabel" 
              runat="server" 
              Text='<%# Eval("OrderID") %>' />
          </td>
          <td>
            <asp:Label ID="OrderDateLabel" 
              runat="server" 
              Text='<%# Eval("OrderDate", "{0:yyyy/MM/dd}") %>' />
          </td>
          <td>
            <asp:TextBox ID="FreighTextBox" 
              runat="server" 
              Text='<%# Eval("Freight", "{0:N2}") %>' />
          </td>
        </tr>
      </ItemTemplate>
      <LayoutTemplate>
        <table ID="itemPlaceholderContainer" 
          runat="server" 
          class="style1">
          <tr runat="server">
            <th runat="server">
              OrderID</th>
            <th runat="server">
              OrderDate</th>
            <th runat="server">
              Freight</th>
          </tr>
          <tr ID="itemPlaceholder" runat="server">
          </tr>
          <tr class="footer">
            <td></td>
            <td>Freight Total</td>
            <td>
              <asp:TextBox ID="FreighTextBox" 
                    runat="server" CssClass="total"/>
            </td>
          </tr>
        </table>                        
      </LayoutTemplate>
    </asp:ListView>

    <script type="text/javascript">
        $(function () {
            var sum = 0.0;
            $('input:text').each(function () {
                sum += Number($(this).val());
            })
            $('input.total').val(sum);
        });
    </script>
</asp:Content>

結果は以下のようになります。

Comments

[Qoo]

回答ありがとうございます。
それも考えたのですが、頻繁にボタンを押して合計を確認したいので
行数も300-500程度あり、描画にも時間かかるため、クライアント側スクリプトで処理したいと考えました。

[退会済みユーザー]

> 行数も300-500程度あり、描画にも時間かかるため、クライアント側スクリプトで処理したいと考えました。

そういう条件で、サーバー側で行うのが正解か、スクリプトで行うのが正解かよく考えた方が良いと思いますが、両方作って比較しないことには判断できないと思いますので、JavaScript / jQuery 案を回答欄に追記しておきます。

Answer 2

丁寧に教えていただきありがとうございます！
無事、クライアント側スクリプトで実現することができました