チェックボックス対応
javascript
1 < script >
2 window . addEventListener ( 'DOMContentLoaded' , function ( e ) {
3 var data = [ "name" , "postalcode" , "mailaddress" , "plan" , "opt" , "memo" ] ;
4 document . querySelector ( '#save' ) . addEventListener ( 'click' , function ( e ) {
5 var t = document . querySelector ( '#list tbody' ) ;
6 t . innerHTML = "" ;
7 t = t . appendChild ( document . createElement ( 'tr' ) ) ;
8 data . forEach ( function ( x ) {
9 var td = document . createElement ( 'td' ) ;
10 var inp = document . querySelector ( '[name="' + x + '"]' ) ;
11 if ( inp . type == "radio" ) inp = document . querySelector ( '[name="' + x + '"]:checked' ) ;
12 if ( inp . type == "checkbox" ) {
13 inp = document . querySelectorAll ( '[name="' + x + '"]:checked' ) ;
14 td . textContent = inp == null ? "" : [ ] . map . call ( inp , function ( x ) { return x . value } ) . join ( "," ) ;
15 } else {
16 td . textContent = inp == null ? "" : inp . value ;
17 }
18 t . appendChild ( td ) ;
19 } ) ;
20 } ) ;
21 } ) ;
22 < / script >
23 < table id = "editor" >
24 < thead >
25 < tr >
26 < th colspan = "2" > 必要事項を記入してください < / th > < / tr >
27 < / thead >
28 < tbody >
29 < tr > < th > 氏名 < / th > < td > < input type = "text" name = "name" / > < / td > < / tr >
30 < tr > < th > 郵便番号 < / th > < td > < input type = "text" name = "postalcode" / > < / td > < / tr >
31 < tr > < th > メール < / th > < td > < input type = "text" name = "mailaddress" / > < / td > < / tr >
32 < tr > < th > プラン < / th > < td >
33 < label > < input type = "radio" name = "plan" value = "Aプラン" > A プラン < / label >
34 < label > < input type = "radio" name = "plan" value = "Bプラン" > B プラン < / label >
35 < / td > < / tr >
36 < tr > < th > オプション < / th > < td >
37 < label > < input type = "checkbox" name = "opt" value = "オプションX" > オプション X < / label >
38 < label > < input type = "checkbox" name = "opt" value = "オプションY" > オプション Y < / label >
39 < label > < input type = "checkbox" name = "opt" value = "オプションZ" > オプション Z < / label >
40 < / td > < / tr >
41 < tr > < th > 自由記述欄 < / th >
42 < td > < textarea name = "memo" > < / textarea > < / td > < / tr >
43 < / tbody >
44 < / table >
45 < div align = "center" >
46 < button id = "delete" > 削除 < / button >
47 < button id = "save" > 申込 < / button >
48 < / div >
49
50 < h1 > 申込完了リスト < / h1 >
51 < table id = "list" >
52 < thead >
53 < tr >
54 < th class = "name" > 氏名 < / th >
55 < th class = "postalcode" > 郵便番号 < / th >
56 < th class = "mailaddress" > メール < / th >
57 < th class = "plan" > プラン < / th >
58 < th class = "opt" > オプション < / th >
59 < th class = "memo" > メモ < / th >
60 < / tr >
61 < / thead >
62 < tbody >
63 < / tbody >
64 < / table >