teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

質問内容が本題とは異なっていた

2018/01/31 08:57

投稿

Qoo
Qoo

スコア1249

title CHANGED
File without changes
body CHANGED
@@ -1,105 +1,81 @@
1
+ 前回の質問ではエンターキー押下でsubmitが発生していたようで、js以前の不具合が発生しておりました。
1
- お世話になっおります
2
+ 質問を変更させ頂きます
2
- 以下のLISTVIEWにて、Javascriptにzaikosu(テキスト)+ order1Text(ラベル)の結果をzaikoAjtLabel(ラベル)にセットしたいのですが
3
- どのようにすればよいでしょうか。
4
3
 
4
+ asp.net ListViewで生成されたテーブル上で、Javascript(jquery)を用いて
5
+ 行の各項目の計算を行いたいです。
5
6
 
7
+ 画面描画後、生成されたHTMLは以下の通りでした。
6
8
 
7
- ```ここに言語を入力
9
+ ```HTML
8
- <div id="scr_pnl" runat="server">
10
+ <table id="itemPlaceholderContainer" border="0" >
11
+ <tbody>
9
12
 
10
- <asp:ListView ID="listView " runat="server" DataSourceID="MySqlDataSource" DataKeyNames="syouhin" >
13
+ <tr style="">
14
+ <th >商品</th>
15
+ <th >規格</th>
16
+ <th >在庫数</th>
17
+ <th >調整数</th>
18
+ <th >調整後在庫</th>
19
+ </tr>
11
20
 
12
- <EmptyDataTemplate>
13
- <table id="Table1" runat="server" style="">
14
- <tr>
21
+ <tr>
22
+ <td >
23
+ <span id="itemLabel">アイテム1</span>
24
+ </td>
25
+ <td >
15
- <td>データは返されませんでした。</td>
26
+ <span id="lotLabel"></span>
27
+ </td>
28
+ <td >
29
+ <span id="order1Label">20</span>
30
+ </td>
31
+ <td >
32
+ <input name="ctl00$ContentPlaceHolderContent$_listView$ctrl0$order1Text" type="text" value="0" id="order1Text">
33
+ </td>
34
+ <td >
35
+ <span id="zaikoAjtLabel">0</span>
36
+ </td>
16
- </tr>
37
+ </tr>
17
- </table>
18
- </EmptyDataTemplate>
19
-
20
- <ItemTemplate>
21
-
22
- <tr>
23
-
24
- <td >
25
- <asp:Label Text='<%# Eval("syouhin") %>' runat="server" ID="itemLabel" />
26
- </td>
27
-
28
- <td >
29
- <asp:Label Text='<%# Eval("zaikosu") %>' runat="server" ID="order1Label" Width="80" />
30
- </td>
31
-
32
- <td >
33
- <asp:TextBox ID="order1Text" runat="server" Text="0" Width="80"></asp:TextBox>
34
- </td>
35
38
 
39
+ <tr>
36
- <td >
40
+ <td >
37
- <asp:Label Text='0' runat="server" ID="zaikoAjtLabel" Width="80" />
41
+ <span id="itemLabel">アイテム1</span>
38
- </td>
42
+ </td>
43
+ <td >
44
+ <span id="lotLabel">小</span>
45
+ </td>
46
+ <td >
47
+ <span id="order1Label">10</span>
48
+ </td>
49
+ <td >
50
+ <input name="ctl00$ContentPlaceHolderContent$_listView$ctrl1$order1Text" type="text" value="0" id="order1Text">
51
+ </td>
52
+ <td >
53
+ <span id="zaikoAjtLabel">0</span>
54
+ </td>
55
+ </tr>
39
56
 
40
- <td >
41
- <asp:DropDownList ID="DropDownList1" runat="server" "></asp:DropDownList>
42
- </td>
57
+ </tbody>
43
-
44
- </tr>
58
+ </table>
45
- </ItemTemplate>
59
+ ```
46
60
 
47
- <LayoutTemplate>
48
-
49
- <table border="0" class="table table-bordered table-hover table-striped table-hgroup" styke="width:90%;" _fixedhead="rows:1; cols:4">
50
- <tr runat="server" style="">
61
+ 処理としては、input(id=order1Text)が変更されたときに計算させたかったので
51
- <th runat="server" >商品</th>
52
- <th runat="server" >在庫数</th>
53
- <th runat="server" >調整数</th>
54
- <th runat="server" >調整後庫</th>
62
+ 下記のようなjqueryを作成しました。ですが、同じidが複数存することなり、1行目は反応しますが、2行目が反応しません。
55
- <th runat="server" >調整理由</th>
56
- </tr>
57
63
 
58
-
59
- <asp:PlaceHolder runat="server" ID="itemPlaceholder" />
60
-
61
- </table>
62
-
63
- </LayoutTemplate>
64
-
65
- <SelectedItemTemplate>
66
- <tr>
64
+ ```jquery
67
-
68
- <td >
69
- <asp:Label Text='<%# Eval("syouhin") %>' runat="server" ID="itemLabel" />
70
- </td>
71
- <td >
72
- <asp:Label Text='<%# Eval("zaikosu") %>' runat="server" ID="order1Label" />
73
- </td>
74
-
75
- <td >
76
- <asp:TextBox ID="order1Text" runat="server" Text="0" ></asp:TextBox>
77
- </td>
78
-
79
- <td >
80
- <asp:Label Text='0' runat="server" ID="zaikoAjtLabel" Width="80" />
81
-
82
- </td>
83
- <td >
84
- <asp:DropDownList ID="DropDownList1" runat="server" "></asp:DropDownList>
85
- </td>
86
-
87
- </tr>
88
- </SelectedItemTemplate>
65
+ $('#order1Text').change(function () {
89
-
90
- </asp:ListView>
66
+ alert('値が変更された');
67
+ });
91
68
  ```
69
+
70
+ そこでセレクタをidではなく、name属性にしようと思ったのですが、
71
+ ASP.netではclientidmode="Static"を使用しても、nameは固定できないようなのです。
92
72
 
73
+ 考えた結果、input属性の変更を検知して、name属性を取得し、テーブル全行からnameが含まれる行を取得して
74
+ その行にあるフィールドを取得して計算させようかと思ったのですが、もっと簡単にできるような方法はないのでしょうか。
93
75
 
94
- 下記のJSでテストしてみましたが、アラートは表示されず
95
- 無効なポストバックまたはコールバック引数です。
96
- イベントの検証は、構成の <pages enableEventValidation="true"/>、
76
+ $('input').change(function () {
97
- またはページの <%@ Page EnableEventValidation="true" %> を使用して有効にされます。
98
- と表示されてしまいます。
77
+ alert(this.name);
78
+ });
99
79
 
100
80
 
101
- $(function () {
102
- $("order1Text").keypress(function (e) {
103
- alert('テキストボックス上でエンターキーが押されました');
81
+ ASP.netよりJavascript寄りの質問かもしれませんが、どうぞよろくお願い致します。
104
- });
105
- }