回答編集履歴

3

chousei

2022/09/21 08:56

投稿

yambejp
yambejp

スコア114390

test CHANGED
@@ -125,8 +125,10 @@
125
125
  window.addEventListener('DOMContentLoaded', ()=>{
126
126
  del.addEventListener('click',()=>{
127
127
  tbl.innerHTML = "";
128
+ document.querySelector('[type=file]').value="";
128
129
  });
129
130
  create.addEventListener('click',()=>{
131
+ del.click();
130
132
  document.querySelector('[type=file]').click();
131
133
  });
132
134
  document.querySelector('[type=file]').addEventListener('change',e=>{

2

調整

2022/09/21 08:50

投稿

yambejp
yambejp

スコア114390

test CHANGED
@@ -97,3 +97,54 @@
97
97
  <div id="tbl"></div>
98
98
  </form>
99
99
  ```
100
+ # 作成ボタンをクリックしたらファイル選択画面が表示される
101
+ ファイルのドラッグアンドドロップはUI的にNGということなので以下
102
+ ```javascript
103
+ <style>
104
+ input[type="file"] {
105
+ display:none;
106
+ }
107
+ body {
108
+ background-color: #FFFF66;
109
+ }
110
+ input {
111
+ margin: 1em;
112
+ }
113
+ table {
114
+ width: 100%;
115
+ border-collapse: collapse;
116
+ border: 1px solid gray;
117
+ background-color: #CCFFFF;
118
+ }
119
+ table td {
120
+ border: 1px solid gray;
121
+ padding: 4px;
122
+ }
123
+ </style>
124
+ <script>
125
+ window.addEventListener('DOMContentLoaded', ()=>{
126
+ del.addEventListener('click',()=>{
127
+ tbl.innerHTML = "";
128
+ });
129
+ create.addEventListener('click',()=>{
130
+ document.querySelector('[type=file]').click();
131
+ });
132
+ document.querySelector('[type=file]').addEventListener('change',e=>{
133
+ const file = e.target.files[0];
134
+ const fr = new FileReader();
135
+ fr.onload = e=>{
136
+ const data=JSON.parse(e.target.result).table;
137
+ const table=`<table><tbody>${data.map(x=>`<tr>${Object.values(x).map(x=>`<td>${x}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
138
+ tbl.innerHTML=table;
139
+ }
140
+ fr.readAsText(file);
141
+ });
142
+ });
143
+ </script>
144
+ <form method="post" enctype="multipart/form-data">
145
+ <input type="file" name="userfile" accept="application/json">
146
+ <input type="button" value="作成" id="create">
147
+ <input type="button" value="削除" id="del">
148
+ <div id="tbl"></div>
149
+ </form>
150
+ ```

1

chousei

2022/09/21 07:38

投稿

yambejp
yambejp

スコア114390

test CHANGED
@@ -34,3 +34,66 @@
34
34
  <input type="button" value="削除" id="del">
35
35
  <div id="tbl"></div>
36
36
  ```
37
+
38
+ # jsonファイルのドラッグアンドドロップでテーブル表示
39
+ こんな感じで
40
+ ```javascript
41
+ <style>
42
+ #droppable {
43
+ border: gray solid 1em;
44
+ display: block;
45
+ padding: 2px 1em;
46
+ position: relative;
47
+ height:100px;
48
+ }
49
+ #droppable input[type="file"] {
50
+ background-Color:red;
51
+ height: 100%;
52
+ left: 0px;
53
+ top: 0px;
54
+ position: absolute;
55
+ width: 100%;
56
+ opacity: 0;
57
+ }
58
+ body {
59
+ background-color: #FFFF66;
60
+ }
61
+ input {
62
+ margin: 1em;
63
+ }
64
+ table {
65
+ width: 100%;
66
+ border-collapse: collapse;
67
+ border: 1px solid gray;
68
+ background-color: #CCFFFF;
69
+ }
70
+ table td {
71
+ border: 1px solid gray;
72
+ padding: 4px;
73
+ }
74
+ </style>
75
+ <script>
76
+ window.addEventListener('DOMContentLoaded', ()=>{
77
+ del.addEventListener('click',()=>{
78
+ tbl.innerHTML = "";
79
+ });
80
+ document.querySelector('[type=file]').addEventListener('change',e=>{
81
+ const file = e.target.files[0];
82
+ const fr = new FileReader();
83
+ fr.onload = e=>{
84
+ const data=JSON.parse(e.target.result).table;
85
+ const table=`<table><tbody>${data.map(x=>`<tr>${Object.values(x).map(x=>`<td>${x}</td>`).join('')}</tr>`).join('')}</tbody></table>`;
86
+ tbl.innerHTML=table;
87
+ }
88
+ fr.readAsText(file);
89
+ });
90
+ });
91
+ </script>
92
+ <form method="post" action="y.php" enctype="multipart/form-data">
93
+ <div id="droppable"><div>ドロップして</div>
94
+ <input type="file" name="userfile" accept="application/json">
95
+ </div>
96
+ <input type="button" value="削除" id="del">
97
+ <div id="tbl"></div>
98
+ </form>
99
+ ```