고정 내비게이션 메뉴에서 테이블 리스트 선택시 탭 화면 업데이트 되도록 변경

eunja511005 commented 1 year ago

설계 내용

1. jquery datatables에서 클릭 이벤트 발생
    $('#dataTable tbody').on('click', 'tr', function() {
        $(this).toggleClass('selected');
    });

2. html의 탭이 동적으로 추가 되면서 선택된 Row의 특정 필드 값을 탭 내용에 보여 주기

3. 동적으로 추가된 탭에는 닫기 버튼(X 버튼)이 있어서 클릭하면 해당 탭 닫히게 구현

eunja511005 commented 1 year ago

ChatGPT 답변 :

jquery datatables에서 클릭 이벤트 발생하는 코드는 선택된 테이블 행에 대해 클래스를 토글하는 코드입니다. 이 코드는 dataTable의 tbody 내부에 있는 tr 요소를 클릭할 때 발생합니다. 클릭된 tr 요소에 selected 클래스가 없으면 추가하고, 있으면 제거합니다.
HTML의 탭이 동적으로 추가될 때 선택된 행의 특정 필드 값을 해당 탭 내용에 보여주는 기능을 구현하려면 다음과 같은 절차를 따를 수 있습니다:
- 클릭 이벤트 핸들러에서 선택된 행의 값을 가져옵니다.
- 동적으로 추가되는 탭의 내용을 생성하고, 선택된 행의 값을 해당 탭 내용에 채웁니다.
- 탭을 동적으로 추가하고 선택된 행의 값을 탭 내용에 표시합니다.
예를 들어, 선택된 행의 값 중에서 name 필드 값을 탭 내용에 보여주는 코드는 다음과 같이 작성할 수 있습니다:
```
$('#dataTable tbody').on('click', 'tr', function() {
   // 선택된 행에서 name 필드 값을 가져옴
   var name = $(this).find('td:eq(1)').text();

   // 동적으로 탭 생성 및 추가
   var tabContent = '<div class="tab-content">' + name + '</div>';
   $('#tabContainer').append(tabContent);

   // 탭 내용에 선택된 행의 name 필드 값 표시
   $('#tabContainer .tab-content:last').text(name);
});
```
위의 코드에서 #tabContainer는 탭이 동적으로 추가되는 컨테이너 엘리먼트를 가리킵니다. 실제로 동작하는 코드에 맞게 해당 컨테이너 엘리먼트의 ID를 수정하시기 바랍니다.
동적으로 추가된 탭에는 닫기 버튼(X 버튼)이 있어서 클릭하면 해당 탭이 닫히도록 구현하려면 다음과 같은 절차를 따를 수 있습니다:
- 닫기 버튼에 클릭 이벤트 핸들러를 등록합니다.
- 클릭 이벤트 핸들러에서 해당 탭을 찾아서 제거합니다.
예를 들어, 닫기 버튼을 클릭했을 때 해당 탭이 닫히도록 구현하는 코드는 다음과 같이 작성할 수 있습니다:
```
$('#tabContainer').on('click', '.close-tab', function() {
   // 닫기 버튼이 속한 탭을 찾아서 제거
   $(this).closest('.tab').remove();
});
```
위의 코드에서 .close-tab는 닫기 버튼을 가리키는 선택자입니다. 실제로 동작하는 코드에 맞게 해당

선택자를 수정하시기 바랍니다. 또한, .tab은 탭 엘리먼트를 가리키는 선택자입니다. 해당 탭 엘리먼트의 클래스 또는 ID에 따라 선택자를 수정하시기 바랍니다.

eunja511005 / AutoCoding

고정 내비게이션 메뉴에서 테이블 리스트 선택시 탭 화면 업데이트 되도록 변경 #76