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

質問編集履歴

1

コードの修正

2018/11/08 09:45

投稿

scoa
scoa

スコア66

title CHANGED
File without changes
body CHANGED
@@ -1,12 +1,61 @@
1
- 変数の中にHTML代入
1
+ ★質問更新ます★
2
- その中で操作したい場合(例:.hogeの中のtrを取得するなど)、
3
- どのような記述をすれば良いのでしょうか。
4
2
 
3
+ テキストエリアにHTMLを入力すると、
4
+ .data_inner tableの中にある、「品番」中身を抽出する画面を作ろうとしています。
5
+ (サンプルコードでいうと、E123・E456を抽出したい)
6
+
7
+ 「取得したテキストエリア内のHTMLにフィルターをかけて品番を抽出する」
8
+ が上手くできずにいます。
9
+
10
+ 恐れ入りますが、
11
+ 解決策がありましたら、ご教示いただけますと幸いです。
12
+
13
+ ```HTML
14
+ <!-- このテキストエリアにHTMLが入る -->
15
+ <textarea name="in">
16
+ <div class="data_inner">
17
+ <div class="data_info data_info_1">
18
+ <table>
19
+ <tr><th>原価</th><td>1000</td></tr>
20
+ <tr><th>単価</th><td>500</td></tr>
21
+ <tr><th>売価</th><td>2000</td></tr>
22
+ <tr><th>品番</th><td>E123</td></tr>
23
+ <tr><th>品名</th><td>ほげほげ</td></tr>
24
+ </table>
25
+ </div>
26
+ <div class="data_info data_info_2">
27
+ <table>
28
+ <tr><th>原価</th><td>1000</td></tr>
29
+ <tr><th>単価</th><td>500</td></tr>
30
+ <tr><th>売価</th><td>2000</td></tr>
31
+ <tr><th>品番</th><td>E456</td></tr>
32
+ <tr><th>品名</th><td>ふがふが</td></tr>
33
+ </table>
34
+ </div>
35
+ <!-- このあとも .data_info のdivは複数存在する -->
36
+ </div>
37
+ </textarea>
38
+ <!-- /このテキストエリアにHTMLが入る -->
39
+
40
+ <textarea name="out" readonly><!-- ここに抽出した品番を出力 --></textarea>
5
41
  ```
6
- <textarea name="in" readonly><!-- ここにHTMLが入る --></textarea>
7
42
 
43
+ ```jQuery
8
44
  <script>
45
+ $(function(){
46
+
47
+ // テキストエリアの中身を取得
48
+ var txt = document.f.in.value; // txtに入っているHTMLに、
49
+
9
- // HTML取得
50
+ // 品番を抽出
51
+ var vals = $('.data_info td').filter(function(){ // フィルターをかけて、
52
+ return $(this).prev('th').text()=="品番";
53
+ }).map(function(){
54
+ return $(this).text();
55
+ }).get();
56
+
57
+ // 出力
10
- var txt = document.f.in.value; // 変数txtにtextareaのHTMLが入っている←これを操作したい
58
+ document.f.out.value = vals; // 出力したい
59
+ });
11
60
  </script>
12
61
  ```