[Jquery] 입력 그룹 값 계산 및 테이블 생성 방법!! (영상 有)

안녕하세요.

오늘은 제이쿼리를 이용하여 테이블의 입력 값의 합계를 계산하는 방법에 대해 정리해보겠습니다.

아래 화면과 같이 group의 입력값에 값을 넣은 뒤, 버튼을 누르면

AJAX로 summary라는 테이블에 입력한 값의 갯수가 출력 되도록 구현해 보았습니다.

 

---

 

모두 jsp파일에 있는 소스들이지만 HTML 과 SCRIPT 부분을 나누어 정리하겠습니다.

 

HTML

 

<div class="table-responsive mt-2">
  <table id="resTb" class="table table-striped table-bordered text-center tbl_List" name="tableStandard">
    <colgroup>
      <col width="5%">
      <col>
      <col width="20%">
      <col width="20%">
      <col width="8%">
    </colgroup>
    <thead>
      <tr>
        <th>NO</th>
        <th>DATA import</th>
        <th>Group</th>
        <th>Sample</th>
        <th>DATA 추가</th>
      </tr>
    </thead> 
    <tbody>
    <c:set var="k" value="0" />
      <tr id="Td" class="tdCount">
        <td id="tdNo_${k}" class="tdNo">1</td>
        <td>
          <select name="fs_fileType" id="fs_fileType_${k}" class="form-control" style="width:30%">
            <option value="fastq">fastq</option>
                 <option value="GZ">GZ</option>
           </select>
           <input type="file" name="fs_file" id="fs_file_${k}" accept="image/*" style="width:30%">
        </td>
        <td><input type="text" name="fs_group" id="fs_group_${k}" value="" style="width:300px" class="form-control fs_group"></td>
        <td><input type="text" name="fs_sample" id="fs_sample_${k}" value="" style="width:300px" class="form-control"></td>
        <td>
        <a href="javascript:void(0);" class="btn  btn  btn-danger btn-sm pmBtn" onclick="addTag(); return false;">+</a>
        <a href="javascript:void(0);" class="btn  btn  btn-danger btn-sm pmBtn" onclick="delTag(this); return false;">-</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="text-right mt-10"><a href="javascript:void(0);" class="btn  btn-success btn-sm pmBtn" onclick="counting();">Count</a></div>
 
 
<h5 class="mt-4 ms-sm-1"><i class="bi bi-check-circle-fill"></i> Summary</h5>
<div class="table-responsive mt-2">
  <table id="resTb" class="table table-striped table-bordered text-center tbl_List">
    <colgroup>
      <col width="5%">
      <col width="55%">
      <col width="40%">
    </colgroup>
    <thead>
      <tr>
        <th>NO</th>
        <th>그룹</th>
        <th>Sample (개수)</th>
      </tr>
    </thead> 
    <tbody>
    <c:set var="i" value="0" />
      <tr id="sumTb_${i}" class="sumTb">
        <td id="sumNo_"${i}>1</td>
        <td id="sumGr_${i}"></td>
        <td id="sumCt_${i}"></td>
      </tr>
    </tbody>
  </table>
</div>

코드는 길지만 여기서 핵심적인 것은 세가지 정도 입니다.

첫번째로 group컬럼에 입력하는 input 태그의 id값에 ${k} 변수를 설정해줘서

태그가 추가될때마다 아이디값이 달라질 수 있도록 설정해줍니다. 

여기서는 fs_group 컬럼을 이용할 예정이기에 class에 fs_group를 설정 합니다.

두번째로 제이쿼리를 사용하도록 count버튼에 counting 함수를 넣어줍니다.

세번째로 입력칸의 테이블과 같이 summary테이블의 각 태그들도 ${i}라는 변수를 넣어주어서 구분될 수 있도록

설정해줍니다. 여기 또한 제이쿼리에서 summary테이블을 반복문에 사용하도록 tr태그의 class에 sumTb를 설정 합니다.

 

 

SCRIPT(JQERUY)

function counting(){
        
  $(".sumTb").each(function(index){
    if(index != 0){
      $("#sumTb_"+index).remove();
    }
  });
  
  var result = new Map();
  var arr = new Array();
  var length = 0;
  
  $(".fs_group").each(function(index){
    var tagId = $(this).attr('id', 'fs_group_'+index);    
    arr.push($(tagId).val());
  });
  
  arr.forEach(function(i){
      result[i] = (result[i] || 0)+1; 
  });
  
  for(var k in result){
    if(length==0){
      $("#sumGr_0").text(k);
      $("#sumCt_0").text(result[k]);
    }else{
      var idx = $(".sumTb").size();
      var no = idx+1;
           var addText ='<tr id="sumTb_'+ idx +'" class="sumTb">'
                    +'<td id="sumNo_'+idx+'">' + no + '</td>'
                    +'<td id="sumGr_'+idx+'">' + k + '</td>'
                    +'<td id="sumCt_'+idx+'">' + result[k] + '</td>'
                    +'</tr>';
          var tbHtml = $(".sumTb:last");
           tbHtml.after(addText);
    }
    length++
  } 
}

 

result라는 맵 과 

arr라는 배열,

length라는 변수가 필요합니다.

 

group  컬럼의 입력값을 입력하고 취소하여 다시 count를 누르면 id값이 틀어지게 됩니다.

이를 바로잡기 위해서!!

fs_group컬럼의 클래스값인 fs_group를 반복문에 설정하여 반복을 수행하면서 id값을 다시 재 설정해줍니다.

그리고 arr라는 배열에 값을 넣어주는거죠!

 

arr를 반복하여 result의 맵 메소드에 값을 넣어줍니다.

 

그리고 result 를 반복하여 만약에 첫번째 반복이라면 첫번째 태그에 값을 넣어주고

아니라면 2번째 태그부터 추가하여 .sumTb의 마지막에 붙어넣어주면 됩니다.

 

그리고 다시 counting함수가 시작할때 summary테이블의 2번째 테이블부터 삭제해줍니다.

첫번째도 지워버리면 계산할 수가 없기 때문이죠!

 

 

 

 

 

 

아래는 연계되는 기능의 포스팅입니다.

[HTML&JQUERY&Java] 태그 추가 삭제 및 다중insert 기능!! (영상 有)

[HTML&JQUERY&Java] 태그 추가 삭제 및 다중insert 기능!! (영상 有)