質問編集履歴
2
ファイルの追記
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
ファイルの追加
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
|
よろしくお願いいたします。
|