가볍게 table 을 select 처럼 사용해보자.

플러그인을 사용하지 않고 jquery 로만 테이블을 select 처럼 선택해서 이용할 수 있도록 하는 스크립트

 

<select size="?"></select>와 같은 형식으로 보여주고 진행한다.

 

1. table에서 라인 하나 클릭 시 이벤트가 동작할 수 있도록 스크립트 셀렉터 지정

2. 해당 라인을 클릭해서 선택했다는 표시가 될 수 있도록 클래스 정리

3. 해당 라인의 속성에 데이터 값으로 선택 값을 지정하고, 클릭하면 그 값을 가져오도록 지정

4. 폼 전송 시 데이터 전송이 가능하도록 테이블 속성에 인풋 명을 지정.

5. 인풋 명에 해당하는 인풋이 없으면 인풋을 만들고, 있으면 인풋에 값을 저장.

		$(document).on('click', '.select-table > tbody > tr', function(){
			/* * * * * * * *
			 * click 효과
			 * * * * * * * */
			let table = $(this).closest('table');
			table.find('tr').each(function(){
				$(this).removeClass('table-active');
			})
			$(this).addClass('table-active');
			/* * * * * * *
			 * 선택 값
			 * * * * * * */
			let value = $(this).data('option-value');

			/* * * * * * * * * * * * * * * * * * *
			 * form 으로 전송 가능하게끔 input으로 처리
			 * * * * * * * * * * * * * * * * * * */
			let target = table.data('target');
			let target_input = $('input[type="hidden"][name="'+target+'"]');

			if(target_input.length > 0){
				target_input.val(value);
			}
			else{
				const hiddenField = document.createElement('input');
				hiddenField.type = 'hidden';
				hiddenField.name = target;
				hiddenField.value = value;
				table.parent().prepend(hiddenField);
			}
		})

 

작업 기반

- Bootstrap 4

- FontAwesome 5

- jQuery 3.6.0

 

jQuery 를 쓰지 않으려면 코드 수정해야합니다.