Я новичок в ajax, подскажите, как вызвать новую пустую таблицу при нажатии кнопки? - PullRequest
Новая
       21

Я новичок в ajax, подскажите, как вызвать новую пустую таблицу при нажатии кнопки?

0 голосов
/ 02 мая 2019

У меня есть таблица (включая тег ввода, это где я добавляю значения).Когда есть пустой результат и когда я нажимаю кнопку (workStepBtn),
я хочу добавить новую пустую таблицу, чтобы я мог добавлять значения, используя новый тег ввода.Но это не работает.Буду признателен за вашу помощь.

мне следует использовать hide() перед использованием show() метода?

Я хочу пустую таблицу с id = "workStep", когда я нажимаю кнопку с id ="WorkStepBtn" и когда есть пустой результат. 

<!DOCTYPE html>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $(document).ready(() => {
    listCall();

    $('#list_btn').click(() => {
      listCall();
    });
  });

  function listCall() {
    $.ajax({
      url: '/projectView',
      type: 'POST',
      data: {
        PJT_CD: PJT_CD
      },
      success: (data) => {
        console.log(data);
        $('#list').empty();
        $(data).each((index, item) => {
          $('#list').append('<tr onclick="mscall(' + item.PJT_CD + ')">' + item.PJT_CD + '</td></tr>');
        });
        mscall(data[0].PJT_CD);
      }
    });

  }


  function mscall(PJT_CD) {
    console.log('mscall실행' + PJT_CD);
    $.ajax({
          url: '/projectViewOne',
          type: 'POST',
          data: {
            PJT_CD: PJT_CD
          },
          success: (data) => {
              console.log(data);
              let needTermTotal = null;
              if (data.projectWorkStep.length == 0) {
                $('#needTermTotal').empty();

                $('#workStepBtn').click(() => {
                  console.log("일정계획 입력버튼 클릭");
                  $('#workStep').text($('#workStep'));
                  //$('#workStep').show();
                });
              }

              $('#workStep').empty();
              $('#needTermTotal').empty();
              $(data.projecWorkStep).each((index, item) => {
                $('#workStep').append('<tr><td>' + item.WORK_STEP_NM +
                  '</td><td>' + item.COUNT +
                  '</td><td><input type="date" id="START' + (index + 1) + '" value="' + item.START + '">' +
                  '</td><td><input type="date" id="END' + (index + 1) + '" value="' + item.END + '">' +
                  '</td><td id="NEED_TERM' + (index + 1) + '">' + item.NEED_TERM +
                  '</td><td id="REAL_END' + (index + 1) + '">' + item.REAL_END +
                  '</td><td><input style="width:100%; type="text" id="RM' + (index + 1) + '" value="' + item.RM + '"></td></tr>');
                needTermTotal = needTermTotal + parseInt(item.NEED_TERM);

              });
              $('#needTermTotal').empty();
              $('#needTermTotal').append(needTermTotal);
</script>


<div class="x_content">
  <button class="btn" id="workStepBtn">일정계획 입력</button>
</div>
<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>단계</th>
      <th>변경</th>
      <th>착수일</th>
      <th>완료예정일</th>
      <th>소요기간(Day)</th>
      <th>종료일</th>
      <th>사유입력</th>
    </tr>
  </thead>
  <tbody id="workStep">
    <tr>
      <td>기획</td>
      <td></td>
      <td><input type="date" id="START1"></td>
      <td><input type="date" id="END1"></td>
      <td></td>
      <td></td>
      <td><input type="text" id="RM1"></td>
    </tr>
    <tr>
      <td>심의</td>
      <td></td>
      <td><input type="date" id="START2"></td>
      <td><input type="date" id="END2"></td>
      <td></td>
      <td></td>
      <td><input type="text" id="RM2"></td>
    </tr>
    <tr>
      <td>허가</td>
      <td></td>
      <td><input type="date" id="START3"></td>
      <td><input type="date" id="END3"></td>
      <td></td>
      <td></td>
      <td><input type="text" id="RM3"></td>
    </tr>
    <tr>
      <td>착공</td>
      <td></td>
      <td><input type="date" id="START4"></td>
      <td><input type="date" id="END4"></td>
      <td></td>
      <td></td>
      <td><input type="text" id="RM4"></td>
    </tr>
    <tr>
      <td>실시</td>
      <td></td>
      <td><input type="date" id="START5"></td>
      <td><input type="date" id="END5"></td>
      <td></td>
      <td></td>
      <td><input type="text" id="RM5"></td>
    </tr>
    <tr>
      <td>A/S</td>
      <td></td>
      <td><input type="date" id="START6"></td>
      <td><input type="date" id="END6"></td>
      <td></td>
      <td></td>
      <td><input type="text" id="RM6"></td>
    </tr>
    <tr>
      <td>준공</td>
      <td></td>
      <td><input type="date" id="START7"></td>
      <td><input type="date" id="END7"></td>
      <td></td>
      <td></td>
      <td><input type="text" id="RM7"></td>
    </tr>
  </tbody>
  <tr>
    <th>소계</th>
    <td></td>
    <td></td>
    <td></td>
    <th id="needTermTotal"></th>
    <td></td>
    <td></td>
  </tr>
</table>

</html>


...