質問編集履歴

1

コードの修正

2018/11/08 09:45

投稿

scoa
scoa

スコア66

test CHANGED
File without changes
test CHANGED
@@ -1,22 +1,120 @@
1
- 変数の中にHTML代入
1
+ ★質問更新ます★
2
-
3
- その中で操作したい場合(例:.hogeの中のtrを取得するなど)、
4
-
5
- どのような記述をすれば良いのでしょうか。
6
2
 
7
3
 
8
4
 
9
- ```
5
+ テキストエリアにHTMLを入力すると、
10
6
 
11
- <textarea name="in" readonly><!-- ここHTMLが入 --></textarea>
7
+ .data_inner tableの中、「品番」中身を抽出する画面を作ろうとしています。
8
+
9
+ (サンプルコードでいうと、E123・E456を抽出したい)
12
10
 
13
11
 
14
12
 
13
+ 「取得したテキストエリア内のHTMLにフィルターをかけて品番を抽出する」
14
+
15
+ が上手くできずにいます。
16
+
17
+
18
+
19
+ 恐れ入りますが、
20
+
21
+ 解決策がありましたら、ご教示いただけますと幸いです。
22
+
23
+
24
+
25
+ ```HTML
26
+
27
+ <!-- このテキストエリアにHTMLが入る -->
28
+
29
+ <textarea name="in">
30
+
31
+ <div class="data_inner">
32
+
33
+ <div class="data_info data_info_1">
34
+
35
+ <table>
36
+
37
+ <tr><th>原価</th><td>1000</td></tr>
38
+
39
+ <tr><th>単価</th><td>500</td></tr>
40
+
41
+ <tr><th>売価</th><td>2000</td></tr>
42
+
43
+ <tr><th>品番</th><td>E123</td></tr>
44
+
45
+ <tr><th>品名</th><td>ほげほげ</td></tr>
46
+
47
+ </table>
48
+
49
+ </div>
50
+
51
+ <div class="data_info data_info_2">
52
+
53
+ <table>
54
+
55
+ <tr><th>原価</th><td>1000</td></tr>
56
+
57
+ <tr><th>単価</th><td>500</td></tr>
58
+
59
+ <tr><th>売価</th><td>2000</td></tr>
60
+
61
+ <tr><th>品番</th><td>E456</td></tr>
62
+
63
+ <tr><th>品名</th><td>ふがふが</td></tr>
64
+
65
+ </table>
66
+
67
+ </div>
68
+
69
+ <!-- このあとも .data_info のdivは複数存在する -->
70
+
71
+ </div>
72
+
73
+ </textarea>
74
+
75
+ <!-- /このテキストエリアにHTMLが入る -->
76
+
77
+
78
+
79
+ <textarea name="out" readonly><!-- ここに抽出した品番を出力 --></textarea>
80
+
81
+ ```
82
+
83
+
84
+
85
+ ```jQuery
86
+
15
87
  <script>
16
88
 
17
- // HTML取得
89
+ $(function(){
18
90
 
91
+
92
+
93
+ // テキストエリアの中身を取得
94
+
19
- var txt = document.f.in.value; // 変数txtにtextareaのHTMLが入っている←これを操作したい
95
+ var txt = document.f.in.value; // txtに入っているHTMLに、
96
+
97
+
98
+
99
+ // 品番を抽出
100
+
101
+ var vals = $('.data_info td').filter(function(){ // フィルターをかけて、
102
+
103
+ return $(this).prev('th').text()=="品番";
104
+
105
+ }).map(function(){
106
+
107
+ return $(this).text();
108
+
109
+ }).get();
110
+
111
+
112
+
113
+ // 出力
114
+
115
+ document.f.out.value = vals; // 出力したい。
116
+
117
+ });
20
118
 
21
119
  </script>
22
120