php js 다이얼로그
본문
상품 목록을 뿌려주고 관리해 주는 페이지를 만들고있습니다. 상품의 고유번호들이 다 있고
그걸 수정 삭제 할수 있는 기능을 구현한 후에 그냥 input 으로 수정하려니 뭔가 보기가 그래서 다이얼로그로
처리하려고 했거든요 ㅠㅠ
밑에 코드로 실행하는데 자바스크립트로 하나하나의 키값? 을 어떻게 담아와야 하나요..? 지금 상태로하면 맨 윗값만 버튼이 눌리고 수정이 가능합니다... 제가 자바스크립트가 약해서 ㅠ 정보를 매칭시켜 주고싶은데 어떻게 해야 할지 감이안옵니다 ... 도와주세요 ㅠㅠ
while ($row = mysqli_fetch_array($result)) {
?>
<tr>
<input type="hidden" name="productno" value="<?php echo $row['productno'] ?>">
<input type="hidden" name="manager" value="<?php echo $row['manager'] ?>">
<input type="hidden" name="work_type" value="<?php echo $row['work_type'] ?>">
<td><input type="text" name="name" class="form-control" value="<?php echo $row['name'] ?>"></td>
<td><input type="text" name="memo" class="form-control" value="<?php echo $row['memo'] ?>"></td>
<td><input type="text" name="count" class="form-control" value="<?php echo $row['count'] ?>"></td>
<td><input type="date" id=input_date class="form-control" style="height:30px;" name="open_date" value="<?php echo $row['open_date'] ?>"></td>
<td><input type="date" id=input_date class="form-control" style="height:30px;" name="end_date" value="<?php echo $row['end_date'] ?>"></td>
<td><input type="text" name="status" class="form-control" value="<?php echo $row['status'] ?>"></td>
<td> <input type="submit" class=button1 id="update_btn" value="수정"><input type="button" class=button2 value="삭제" onclick='return submit1(this.form);'></td>
<dialog id="favDialog['<?php echo $row['productno']; ?>']">
<form action="main_control.php?option=update" method="POST">
<input type="hidden" name="productno" value="<?php echo $row['productno'] ?>">
<input type="hidden" name="manager" value="<?php echo $row['manager'] ?>">
<input type="hidden" name="work_type" value="<?php echo $row['work_type'] ?>">
<input type="text" name="name" class="form-control" value="<?php echo $row['name'] ?>">
<input type="text" name="memo" class="form-control" value="<?php echo $row['memo'] ?>">
<input type="text" name="count" class="form-control" value="<?php echo $row['count'] ?>">
<menu>
<input type=button value="cancel" value="취소">
<input type=submit id="confirmBtn" value="확인">
</menu>
</form>
</dialog>
<output aria-live="polite"></output>
<script>
var updateButton = document.getElementById('update_btn');
var favDialog = document.getElementById('favDialog['<?php echo $row['productno']; ?>']');
var outputBox = document.getElementsByTagName('output')[0];
var selectEl = document.getElementsByTagName('select')[0];
var confirmBtn = document.getElementById('confirmBtn');
// “Update details” button opens the <dialog> modally
updateButton.addEventListener('click', function onOpen() {
if (typeof favDialog.showModal === "function") {
favDialog.showModal();
} else {
alert("The <dialog> API is not supported by this browser");
}
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener('change', function onSelect(e) {
confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener('close', function onClose() {
outputBox.value = favDialog.returnValue + " button clicked - " + (new Date()).toString();
});
</script>
<?php
}
?>
답변 1
바닐라 스크립트 할때 for문으로 해당 클래스를 돌려서 이벤트 처리 해야되요
그래서 결국엔 제이쿼리 쓰면 find로 쓰거든요 셀렉터 잘 써주고 find 나 children 함수 써서 하면 문법이 간단해져요
바닐라 자스에 자신 없으면 제이쿼리 추천해요~ 국내에선 계속 쓰거든요 만약에 프론트엔드로 전향 한다고하면 바닐라고 계속 하셔두 되구요 나중에 뷰랑 리액트 배울땐 es6 이상 알아야하구요
답변을 작성하시기 전에 로그인 해주세요.