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

質問編集履歴

2

ファイルの追記

2021/10/02 00:17

投稿

anko__
anko__

スコア5

title CHANGED
File without changes
body CHANGED
@@ -64,5 +64,131 @@
64
64
 
65
65
  ```
66
66
 
67
+ ■追記
68
+ 上記のスクリプトは一つのhtml内に記載をしております。
69
+
70
+ ```html
71
+ player.html
72
+
73
+ <!DOCTYPE html>
74
+ <html xmlns:th="http://www.thymeleaf.org">
75
+
76
+
77
+ <head>
78
+ <link rel="stylesheet" href="css/player.css">
79
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
80
+ <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
81
+
82
+ <meta charset="UTF-8"/>
83
+ <script>
84
+
85
+ var years = [];
86
+ var leags = ["batp","batc"];
87
+ var year = 2005;
88
+ for(i=0;i<2021-year;i++){
89
+ years[i] = year+i;
90
+ for(j=0;j<leags.length;j++){
91
+ var script = document.createElement('script');
92
+ script.src = "/json/"+leags[j]+years[i] + ".json.js";
93
+ document.head.appendChild(script); //<head>に生成
94
+ }
95
+ }
96
+
97
+ </script>
98
+ </head>
99
+ <body>
100
+ <h3>選手一覧</h3>
101
+
102
+ <div>
103
+ <label id="leag">
104
+ <label><input type="radio" v-model="value" value=batc>セリーグ</label>
105
+ <label><input type="radio" v-model="value" value=batp>パリーグ</label>
106
+ </label>
107
+
108
+ <form id="selectDate">
109
+ <select v-model="selected">
110
+ <option v-for="(year,index) in list" :key="index":value=year>
111
+ {{ year }}
112
+ </option>
113
+ </select>年
114
+ </form>
115
+ </div>
116
+ <button id="showButton" v-on:click="showPlayers()">検索</button>
117
+
118
+ <div id="app">
119
+ <table class="vue_tbl">
120
+ <thead>
121
+ <tr id="table_head">
122
+ <th>項番</th>
123
+ <th class="player">選手 <span style="font-size: 12px ;width:100%"></span></th>
124
+ <th>打率 <span style="font-size: 12px"></span></th>
125
+ </tr>
126
+ </thead>
127
+ <tbody>
128
+ <tr v-for="(item, index) in items">
129
+ <td>{{ index + 1 }}</td>
130
+ <td class="strEle">{{ item.player }} {{ item.team }}</td>
131
+ <td>{{ item.avarage }}</td>
132
+ </tr>
133
+ </tbody>
134
+ </table>
135
+ </div>
136
+
137
+
138
+ <script>
139
+ var app = new Vue({
140
+ el: '#app',
141
+ data() {
142
+ return {
143
+ items:batc2005,
144
+ batc2005:batc2005
145
+ }
146
+ },
147
+ methods: {
148
+ isSelect: function (dataList) {
149
+ this.items = dataList;
150
+ }
151
+ }
152
+ })
153
+
154
+ var leag = new Vue({
155
+ el: '#leag',
156
+ data: {
157
+ value: ''
158
+ }
159
+ })
160
+ var vm = new Vue({
161
+ el: '#selectDate',
162
+ data: {
163
+ selected: null,
164
+ list: [],
165
+ num:100
166
+ },
167
+ created(){
168
+ const year = new Date().getFullYear()
169
+ for(let i=0;i<=year-2005;i++){
170
+ this.list.unshift(year- i)
171
+ }
172
+ this.selected=year
173
+ },
174
+ })
175
+
176
+ var showButton = new Vue({
177
+ el: '#showButton',
178
+ methods:{
179
+ showPlayers:function(){
180
+ var str = leag.value+vm.selected
181
+ app.items=app[str];
182
+ }
183
+ }
184
+ });
185
+
186
+ </script>
187
+ </body>
188
+
189
+ </html>
190
+
191
+ ```
192
+
67
193
  御教授いただけると幸いです。
68
194
  よろしくお願いいたします。

1

ファイルの追加

2021/10/02 00:17

投稿

anko__
anko__

スコア5

title CHANGED
File without changes
body CHANGED
@@ -54,5 +54,15 @@
54
54
  batc2005自体は、batc2005.json.js内で定義をしているため、
55
55
  jsファイルを見に行っていれば、問題ない認識なのですが、、
56
56
 
57
+ ```batc2005.json.js
58
+ batc2005= [
59
+ {"caughtStealing":"7","baseOnBalls":"37","homeRuns":"3","hitByPitch":"5","twoBaseHit":"26","runsScored":"100","onBasePercentage":".387","team":"(ヤ)","totalBases":"245","atBat":"588","hit":"202","stolenBases":"29","threeBaseHit":"4","runBatted":"28","sluggingPercentage":".417","totalPlateAppearance":"649","games":"144","strikeouts":"113","sacrificeFly":"1","sacrificeHit":"18","groundIntoDoublePlay":"5","avarage":".344","intentionalBasesOnBalls":"0","player":"青木 宣親"}
60
+ ,
61
+ {"caughtStealing":"5","baseOnBalls":"93","homeRuns":"28","hitByPitch":"1","twoBaseHit":"39","runsScored":"102","onBasePercentage":".430","team":"(中)","totalBases":"304","atBat":"515","hit":"169","stolenBases":"13","threeBaseHit":"6","runBatted":"103","sluggingPercentage":".590","totalPlateAppearance":"612","games":"142","strikeouts":"128","sacrificeFly":"3","sacrificeHit":"0","groundIntoDoublePlay":"8","avarage":".328","intentionalBasesOnBalls":"3","player":"福留 孝介"}
62
+
63
+ ];
64
+
65
+ ```
66
+
57
67
  御教授いただけると幸いです。
58
68
  よろしくお願いいたします。