공부하면 별거 아니지만 은근히 안외워지고 그때그때 자꾸 검색해야해서 기록함..
#체크박스 선택시 해당 tr의 원하는 td값 가져오기
라디오 버튼 클릭시 칸2의 값을 가져옵니다...해당칸까지 포함해서 계산합니다.
// 버튼 클릭 이벤트 처리
$("#but").on("click", function() {
// 체크된 체크박스들의 3번째 칸 데이터 출력
var tr_1 = chose.closest("tr");
var td_3 =tr_1.find("td:nth-child(3)").text();
console.log(td_3);
});
$("#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 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));
});
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");
});
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로 간단히 변경이 가능하다.
