반응형
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
table, td, th{
border : 1px solid #ccc;
font-size: 20px;
text-align: center;
border-collapse: collapse;
padding : 5px 20px;
}
.btn {
margin-top: 20px;
padding: 10px;
font-size: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="app">
<div>
<lable>입력 : <input type="text"></lable>
<select v-model="selectItem">
<option id=0 value="all">:: 전체 ::</option>
<option id=1 value="기계">기계</option>
<option id=2 value="전기전자">전기전자</option>
<option id=3 value="컴퓨터정보">컴퓨터정보</option>
</select>
<button @click="fnclick()" style="margin-bottom: 20px;">click</button>
</div>
<div class="table-list">
<table>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">No.</th>
<th scope="col">학번</th>
<th scope="col">이름</th>
<th scope="col">학과</th>
<th scope="col">학년</th>
<th scope="col">키</th>
<th scope="col">몸무게</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list">
<template v-if="updateNo != item.stu_no">
<td><input type="radio" v-bind:value="item" v-model="checkList"></td>
<td>{{index + 1}}</td>
<td>{{item.stu_no}}</td>
<td>{{item.stu_name}}</td>
<td>{{item.stu_dept}}</td>
<td>{{item.stu_grade}}</td>
<td>{{item.stu_height}}</td>
<td>{{item.stu_weight}}</td>
</template>
<template v-else>
<td><button @click="fnUpdateMember">저장</button></td>
<td>{{index + 1}}</td>
<td><input type="text" v-model="info.stu_no" size="10"></td>
<td><input type="text" v-model="info.stu_name" size="5"></td>
<td><input type="text" v-model="info.stu_dept" size="5"></td>
<td><input type="text" v-model="info.stu_grade" size="3"></td>
<td><input type="text" v-model="info.stu_height" size="3"></td>
<td><input type="text" v-model="info.stu_weight" size="2"></td>
</template>
</tr>
<tr v-if = "addFlg">
<td><button @click="fnAddMember">저장</button></td>
<td></td>
<td><input type="text" size="10" v-model="stuNo"></td>
<td><input type="text" size="5" v-model="stuName"></td>
<td><input type="text" size="7" v-model="stuDept"></td>
<td><input type="text" size="3" v-model="stuGrade"></td>
<td><input type="text" size="5" v-model="stuHeight"></td>
<td><input type="text" size="5" v-model="stuWeight"></td>
</tr>
</tbody>
</table>
</div>
<button @click="fnDelete" class="btn">삭제</button>
<button @click="fnInsert" class="btn">추가</button>
<button @click="fnUpdate" class="btn">수정</button>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
seen: true,
list : [],
name : "",
nameFlg : "",
checkList : [],
selectItem : "",
// 추가 박스를 보이게 하는 플러그
addFlg : false,
stuNo : "",
stuName : "",
stuDept : "",
stuGrade : "",
stuHeight : "",
stuWeight : "",
info : {},
updateNo : ""
}, methods: {
fnTest : function(){
var self = this;
$.ajax({
url:"js/MOCK_DATA2.json",
dataType:"json",
success:function(data) {
self.list = data;
}
});
},
fnclick : function() {
console.log(this.selectItem);
},
fnUpdate : function() {
this.updateNo = this.checkList.stu_no;
this.info = this.checkList;
console.log(this.checkList);
},
fnUpdateMember : function(){
for(let i=0; i<this.list.length; i++){
if(this.list[i].stu_no == this.checkList.stu_no){
this.list[i] = this.info;
}
}
this.info = {stu_no : "", stu_name : "", stu_dept : "", stu_grade : "" , stu_height : "" , stu_weight : ""}
this.updateNo = "";
},
fnInsert : function() {
this.addFlg = !this.addFlg;
console.log(addFlg);
},
fnAddMember : function() {
this.info = {stu_no : this.stuNo, stu_name : this.stuName,
stu_dept : this.stuDept, stu_grade : this.stuGrade ,
stu_height : this.stuHeight , stu_weight :this.stuWeight}
this.list.push(this.info);
this.addFlg = false;
this.stuNo = "", this.stuName = "",
this.stuDept = "", this.stuGrade = "" ,
this.stuHeight = "" , this.stuWeight = ""
},
fnDelete : function() {
console.log(this.checkList);
for(let i=this.list.length-1; i>=0; i--) {
for (let j=0; j<this.checkList.length; j++) {
if (this.list[i].stu_no == this.checkList[j].stu_no) {
this.list.splice(i,1);
break;
}
}
}
}
}
, created: function () {
this.fnTest();
}
});
</script>
반응형
'Java Script > Vue.js' 카테고리의 다른 글
| [Vue] v-bind:class, 조건문 #0418수업 #3교시 (0) | 2023.04.18 |
|---|---|
| [Vue] v-bind:class #0418수업 #1교시 (0) | 2023.04.18 |
| [Vue] Vue 복습문제 - 검색, 체크박스, 삭제 #0417수업 #2교시 (0) | 2023.04.17 |
| [Vue] Vue 복습문제 #0417수업 #1교시 (0) | 2023.04.17 |
| [Vue] #0414수업 #8교시 (0) | 2023.04.14 |