table관련 여러 기능들

공부하면 별거 아니지만 은근히 안외워지고 그때그때 자꾸 검색해야해서 기록함..

예제입니다. 간단히...^^

#체크박스 선택시 해당 tr의 원하는 td값 가져오기

라디오 버튼 클릭시 칸2의 값을 가져옵니다...해당칸까지 포함해서 계산합니다.

// 버튼 클릭 이벤트 처리
$("#but").on("click", function() {
// 체크된 체크박스들의 3번째 칸 데이터 출력

$("input[name=poizon]:checked").each(function(index) {
var $row = $(this).closest("tr"); // 체크된 체크박스가 속한 행
var thirdCellText = $row.find("td:nth-child(3)").text(); // 3번째 칸의 텍스트 조회
var thirdCellText = $row.find("td").eq(2).text(); // 3번째 칸의 텍스트 조회
console.log("선택된 2번째 칸 데이터: " + thirdCellText);
});

var chose=$("input[name=poizon]:checked");
var tr_1 = chose.closest("tr");
var td_3 =tr_1.find("td:nth-child(3)").text();
console.log(td_3);
});

each를 통하면  tr의 td값을 순서대로 출력도 가능함.

$("input[name=poizon]:checked").each(function () {
var $row = $(this).closest("tr"); // 체크된 체크박스가 속한 행
var rowData = ""; // 행의 데이터를 저장할 변수

// 행의 각 셀 데이터를 조회하여 rowData에 추가합니다.
$row.find("td").each(function () {
rowData += $(this).text() + " | ";
});

// 마지막에는 "|" 구분자를 제거하고 데이터를 출력합니다.
console.log("선택된 행 데이터: " + rowData.slice(0, -3));
});

#라디오 버튼 선택시 해당 tr만 배경색 바꾸기....

$('input[name=poizon]').change(function() {
var chose=$("input[name=poizon]:checked");
// Get the parent row of the radio
var row = chose.closest('tr');
$('tr').css("background-color","");
row.css("background-color","gray");

});

css로 간단히 변경이 가능하다.