비전공자 개발일기

JQuery - input & button Event 본문

JQuery

JQuery - input & button Event

HiroDaegu 2022. 1. 5. 21:24
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4544051457126963"
  crossorigin="anonymous"></script>
</head>
<body>
  <table class="type_2">
    <colgroup>
      <col width="10%">
      <col width="10%">
      <col width="10%">
      <col width="15%">
      <col width="46%">
      <col width="10%">
    </colgroup>
    <thead>
      <tr>
        <th>No</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D/th>
        <th>E</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td>1</td>
          <td>X</td>
          <td>Y</td>
          <td>Z</td>
          <td>
            <span class="memo_span">XYZ</span>
            <input type="text" style="display: none;" name="cs_memo" id="memo_input" value="<?=$row['cs_memo']?>">
            <input type="hidden" name="cs_idx" id="memo_idx" value="<?=$row['cs_idx']?>">
          </td>
          <td>
            <button style="width : 100px; height: 40px;" type="button" class="cs_btn orange_btn_f63 memo_write">수정</button>
            <button style="width : 100px; height: 40px; background-color: #cc3433; display: none;" type="button" class="cs_btn orange_btn_f63 memo_save">저장</button>
          </td>
        </tr>   
    </tbody>
  </table>






  <script>
    $(function(){
  
            // 상담 메모 수정
            $(".memo_write").click(function(event) {
  
            $(this).parent().parent().find('#memo_input').css('display','block');
            $(this).parent().parent().find('.memo_span').css('display','none');
            $(this).parent().parent().find('.memo_write').css('display','none');
            $(this).parent().parent().find('.memo_save').css('display','block');
            // $('#memo_input')
            // $('.memo_span').css('display','none');
            // $('.memo_write').css('display','none');
            // $('.memo_save').css('display','block');
            });
  
            // 상담메모 저장
            $(".memo_save").click(function(event) {
            var db_idx = "<?=$_GET['db_idx']?>";
            var cs_idx = $(this).parent().parent().find('#memo_idx').val();
            var cs_memo = $(this).parent().parent().find('#memo_input').val();
            $.post('/경로', {db_idx: db_idx,cs_idx: cs_idx,cs_memo: cs_memo}, function(data, textStatus, xhr) {
            alert(data.returnMsg);
            location.reload();
            });
    });
  
  });
  </script>
</body>
</html>
728x90
LIST

'JQuery' 카테고리의 다른 글

Dynamic Select Option  (0) 2022.05.04
Conditional Statements in jQuery  (0) 2022.01.08
JQuery - sortable  (0) 2021.12.27
JQuery 17 - datepicker  (0) 2021.12.24
Serialize - input name에 해당 되는 값들 추출  (0) 2021.12.18
'JQuery' Related Articles more