jQuery로 rowspan에 묶인 여러 input에 같은 값 한 번에 채우기

표에서 rowspan으로 병합한 셀에 값 하나 넣으면, 그 셀이 세로로 덮고 있는 나머지 행 입력칸에도 같은 값이 자동으로 들어가게 하고 싶었음. 예를 들어 ‘작업 전’ 칸에 1 넣으면 그 칸이 묶은 행 전부 1, ‘작업 후’ 칸에 2 넣으면 묶인 행 전부 2 이렇게.

작업전(rowspan 2)에 1 넣으니 아래 두 칸이 1로, 작업후(rowspan 3)에 2 넣으니 아래 세 칸이 2로 채워짐.

HTML 구조

병합된 셀(rowspan)에 값 넣는 마스터 input이랑, 실제로 값이 채워질 대상 input(name="p_time[]")으로 나뉨. oninput 핸들러는 마스터 input에만 검.

<tr>
	<td rowspan="2">
		<input type="tel" oninput="func_setTime(this)"/>
	</td>
	<td class="td_lft">
		<input type="tel" name="p_time[]"/>
	</td>
</tr>

<tr>
	<td rowspan="3">
		<input type="tel" oninput="func_setTime(this)"/>
	</td>
	<td class="td_lft">
		<input type="tel" name="p_time[]"/>
	</td>
</tr>

함수

function func_setTime(el) {
	var idx = $(el).closest("tr").index();
	var rowspan = Number($(el).closest("td").attr('rowspan'));
	var total = idx + rowspan;
	return $("input[name='p_time[]']").slice(idx, total).val(el.value);
}

한 줄씩 뜯어보면 이럼.

• idx — 방금 값 넣은 마스터 input이 속한 행 인덱스. closest("tr").index()로 몇 번째 행인지 구함.
• rowspan — 그 셀이 몇 개 행을 병합했는지. td의 rowspan 속성을 숫자로 읽음.
• total — idx + rowspan. 값 채울 마지막 위치(직전).
• slice(idx, total) — 전체 p_time[] input 중에 idx번째부터 total 직전까지만 골라냄.
• .val(el.value) — 골라낸 input들에 마스터 값 한 번에 세팅.

동작 원리

결국 jQuery slice(시작, 끝)이 다 함. rowspan이 2면 현재 행부터 2칸, 3이면 3칸 잡아서 같은 값 넣음. 병합 셀에 값 한 번만 넣어도 그 셀이 덮고 있는 행 수만큼 대상 input이 같은 값으로 채워짐.

• 작업 전 칸에 1 → 그 칸이 묶은 행 전부 1
• 작업 후 칸에 2 → 그 칸이 묶은 행 전부 2

주의점

.index()는 형제 tr 중에서의 위치를 돌려줌. 그래서 thead 행이나 성격 다른 tr이 같은 부모에 섞여 있으면 여기서 구한 idx가 p_time[] 인덱스랑 어긋날 수 있음. 값 넣는 행들이랑 p_time[] input 순서가 1:1로 맞는 같은 tbody 구조일 때만 안전함. 행 구성이 복잡하면 idx를 tr 위치 말고 p_time[] 기준으로 따로 계산하는 게 나음.