출력 결과
코드
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var searchData = {};
var tempData;
function getSend(urladdr, param) {
var temp;
$.ajax({
type: 'post',
headers: {
"Content-Type": "application/json"
},
async: false,// ajax를 동기화(순서대로) 처리해야하는 경우 true로하거나 기술하지 않으면 비동기로 작동한다.
url: urladdr,
data: param,
dataType: "json",
success: function (result) {
temp = result;
},
});
return temp;
}
function getMulti(urladdr, formData) {
var temp;
$.ajax({
type: 'post',
enctype: 'multipart/form-data',
data: formData,
dataType: 'json',
processData: false,
contentType: false,
async: false,// ajax를 동기화(순서대로) 처리해야하는 경우 true로하거나 기술하지 않으면 비동기로 작동한다.
url: urladdr,
success: function (result) {
temp = result;
},
});
return temp;
}
function searchRow() {
var member = {};
member["name"] = document.getElementById('name').value;
var jsonString = JSON.stringify(member);
console.log(jsonString);
var revdata = getSend('/ajaxSelectMember.do', jsonString);
console.log(revdata);
searchData = revdata;
console.log('searchData');
console.log(searchData);
var value = '';
for (var i = 0; i < revdata.length; i++) {
value +=
'<tr>' +
'<td scope="row"><input type="checkbox" id="chbx"><input type="button" value="삭제" onclick="delRow()"></td>' +
'<td><input type="text" name="id" value="' + revdata[i]['id'] + '" disabled></td>' +
'<td><input type="text" name="name" value="' + revdata[i]['name'] + '" ></td>' +
'<td><input type="text" name="tel" value="' + revdata[i]['tel'] + '" ></td>' +
'<td><input type="text" name="addr" value="' + revdata[i]['addr'] + '" ></td>' +
'<td><input type="text" name="hp" value="' + revdata[i]['hp'] + '" ></td>' +
'<td><form id="member"><input type="file" name="file" id="image" accept="image/*" onchange="setThumbnail(event)"></form></td>' +
'<td><div id="image_container"></td>'
'</tr>'
}
document.getElementById('memTable').innerHTML = value;
}
function insertRow(id, name, tel, addr, hp) {
var member = {};
member["id"] = id;
member["name"] = name;
member["tel"] = tel;
member["addr"] = addr;
member["hp"] = hp;
var jsonString = JSON.stringify(member);
console.log(jsonString);
var revdata = getSend('/ajaxInsertMember.do', jsonString);
console.log(revdata);
}
function insertRowFile(form, id) {
var formData = new FormData(form);
formData.append("id", id);
console.log(formData);
var revdata = getMulti('/ajaxInserFileMember.do', formData);
console.log(revdata);
}
function updateRow(id, name, tel, addr, hp) {
var member = {};
member["id"] = id;
member["name"] = name;
member["tel"] = tel;
member["addr"] = addr;
member["hp"] = hp;
var jsonString = JSON.stringify(member);
console.log(jsonString);
var revdata = getSend('/ajaxUpdateMember.do', jsonString);
console.log(revdata);
}
//delete Row
function deleteRow(id) {
var member = {};
member["id"] = id;
var jsonString = JSON.stringify(member);
console.log(jsonString);
var revdata = getSend('/ajaxdeleteMember.do', jsonString);
console.log(revdata);
}
function saveRow() {
var form = $("#member");
console.log(form);
if (searchData != undefined || searchData != null || searchData.length > 0) {
///////////////////////////////////////////
console.log('save');
var j = 0;
$('#memTable tr').each(function () {
var flag2 = false;
console.log('1');
var tr = $(this);
var td = tr.children();
for (var i = 0; i < searchData.length; i++) {
//console.log('2');
//if(td.eq(1).children().val() == searchData[i]['id']){
// console.log('3');
// flag2 = true;
// break;
//}
console.log(form[j]);
console.log(j);
console.log(td.eq(1).children().val());
}
console.log('4_1');
//if(!flag2){
// console.log('4');
// insertRow(form[i]);
//}
insertRow(td.eq(1).children().val(), td.eq(2).children().val(), td.eq(3).children().val(), td.eq(4).children().val(), td.eq(5).children().val());
if (form[j] != undefined) {
insertRowFile(form[j], td.eq(1).children().val());
}
j++;
});
} else {
//ifsearchData X tempData O Insert
}
// searchRow();
}
function changeRow() {
$('#memTable tr').each(function () {
var tr = $(this);
var td = tr.children();
console.log(td.eq(1).children().val());
console.log(td.eq(2).children().val());
console.log(td.eq(3).children().val());
console.log(td.eq(4).children().val());
console.log(td.eq(5).children().val());
});
}
function setThumbnail(event) {
var reader = new FileReader();
reader.onload = function (event) {
var img = document.createElement("img");
img.setAttribute("src", event.target.result);
document.querySelector("div#image_container").appendChild(img);
};
reader.readAsDataURL(event.target.files[0]);
}
function addRow() {
var insrtData = document.getElementById('memTable');
var row = insrtData.insertRow(insrtData.rows.lenght);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
cell1.innerHTML = '<td scope="row"><input type="checkbox" id="chbx"><input type="button" value="삭제" onclick="delRow()"></td>';
cell2.innerHTML = '<td><input type="text" name="id"></td>';
cell3.innerHTML = '<td><input type="text" name="name"></td>';
cell4.innerHTML = '<td><input type="text" name="tel"></td>';
cell5.innerHTML = '<td><input type="text" name="addr"></td>';
cell6.innerHTML = '<td><input type="text" name="hp"></td>';
cell7.innerHTML = '<td><form id="member"><input type="file" name="file" id="image" accept="image/*" onchange="setThumbnail(event)"></form></td>';
cell8.innerHTML = '<td><div id="image_container"></div>';
// cell8.innerHTML = '<td><div id="image_container"></div>';
}
function delRow() {
var insrtData = document.getElementById('memTable');
for (var i = 1; i < insrtData.rows.length; i++) {
var chbx = insrtData.rows[i].cells[0].childNodes[0].checked;
if (chbx) {
insrtData.deleteRow(i);
i--;
}
}
}
</script>
<title>Hello, world!</title>
</head>
<body>
<input type="text" id="name" value="">
<input type="button" value="조회" onclick="searchRow()">
<input type="button" value="저장" onclick="saveRow()">
<input type="button" value="수정" onclick="changeRow()">
<input type="button" value="추가" onclick="addRow()">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</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>
<th scope="col">미리보기</th>
</tr>
</thead>
<tbody id="memTable">
<tr>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
</body>
</html>
