IT/WEB

버튼 클릭 시 리스트안에 있는 Row 데이터 전부 가져오기

오달달씨 2023. 4. 28. 12:25
728x90
반응형
$('button[name="save-all"]').on('click', function() {
	var dataList  = $("#tbody_list tr").map(function() {
		// 각 tr 요소 안에 있는 데이터를 객체로 저장합니다.
		var rowData = {};
		$(this).find("td").each(function(index, item) {
			// td 요소의 텍스트 데이터를 가져와서 속성명과 함께 객체에 저장합니다.
			rowData["column_" + index] = $(item).text().trim();
		});
		return rowData; // 변환된 객체를 배열에 추가합니다.
	}).get();
	console.log(dataList); // 배열 출력
});

목표 : <button name = "save-all> 버튼을 클릭 시 <tbody id = "tbody_list"> 태그 안에 있는 리스트 데이터들을 제이쿼리를 사용해 배열로 받는다.


방법 : $("#tbody_list tr")로 tbody 안에 있는 모든 tr 요소들을 선택하고, .map() 함수를 사용하여 각각의 tr 요소에 대해 함수를 실행. 

$(this).find("td")로 현재 tr 요소 안에 있는 모든 td 요소들을 선택하고, .each() 함수를 사용하여 각각의 td 요소에 대해 함수를 실행

이 함수에서는 $(item).text().trim()으로 td 요소의 텍스트 데이터를 가져와서 rowData 객체에 속성명과 함께 저장하고, 마지막으로 .map() 함수는 변환된 객체를 배열에 추가하고, .get() 함수를 사용하여 최종적으로 배열을 반환

 

728x90
반응형