| 테이블 긴 텍스트, 깔끔하게 표시하고 툴팁으로 전체 보기테이블()을 만들다 보면 안에 들어가는 텍스트 내용이 너무 길어 화면 레이아웃을 깨뜨리거나 가독성을 해치는 경우가 많습니다. 이럴 때 긴 텍스트를 한 줄로 줄이고 말줄임표(...)로 처리한 뒤, 마우스를 올리면 전체 내용을 보여주는 툴팁 기능을 추가하여 UI를 깔끔하게 유지할 수 있습니다.이번 포스팅에서는 CSS와 jQuery를 활용하여 이 기능을 구현하는 방법을 자세히 알아보겠습니다.1. 목표 설정 내 긴 텍스트를 한 줄로 표시하고, 넘치는 부분은 ...으로 처리마우스를 에 올렸을 때, ...으로 잘린 텍스트의 전체 내용을 툴팁으로 보여주기2. CSS로 텍스트 말줄임표 처리하기가장 먼저 할 일은 CSS를 사용하여 긴 텍스트를 한 줄로 만들고..
아래는 id="excelGo" 버튼을 클릭했을 때 jQuery로 AJAX 호출하여 Excel 파일 다운로드 하는 코드 예시입니다.클릭 시 서버에 요청을 보내고, 응답을 처리하도록 구성했습니다.✅ HTML 코드 (이미 제공됨)우수✅ jQuery AJAX 코드 $(document).ready(function () { $('#excelGo').on('click', function () { $.ajax({ url: '/excel/download', // 요청 보낼 URL type: 'GET', // 메서드 (GET/POST 등) xhrFields: { responseType: 'blob' // 파일 다운로드용 ..
ajax 요청 시 마우스 커서가 로딩표시로 바뀌도록 설정 //AJAX 통신 시작 $( document ).ajaxStart(function() { //마우스 커서를 로딩 중 커서로 변경 $('html').css("cursor", "wait"); }); //AJAX 통신 종료 $( document ).ajaxStop(function() { //마우스 커서를 원래대로 돌린다 $('html').css("cursor", "auto"); });
💻 MDN Web DOC https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match String.prototype.match() - JavaScript | MDN The match() method retrieves the result of matching a string against a regular expression. developer.mozilla.org 💻 특정 문자 포함여부 체크 var telValue = $('#tel').val(); if ( telValue.match("-")) { alert('-을 제거해주세요.'); return false; }
| 체크박스에 체크된 obj들 조회하여 value 가져오기 // 체크된 obj들 조회하여 value 가져오기 $("input[name=partChk]:checked").each(function() { console.log($(this).val()); }) | 체크박스 전체 선택/해제 $("input[name=partChk]").prop("checked", false); //전체 해제 $("input[name=partChk]").prop("checked", true); // 전체 선택 | 체크박스 중복값 있는지 체크 var duplicatedList = new Array(); //이미 추가된 모든 checkbox 조회하여 순회 $(opener.document).find("input[name=partChk]..
목표 : 이미지를 팝업창으로 열어서 확대/축소 등 기능 적용 소스 결과 참고 URL https://github.com/nzbin/magnify GitHub - nzbin/magnify: 🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+! 🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+! - GitHub - nzbin/magnify: 🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+! github.com 참고 URL
목표 : TABLE의 특정 컬럼 클릭 시 해당객체 > 상위객체 > 하위의 7번째 TD컬럼 값 가져오기 $(".partNumber2, .partNumber3").click(function() { console.log(' -- partNumber2 -- '); var selectedObj = $(this); // 해당객체 console.log(selectedObj); var parentObj = selectedObj.parent(); //상위객체 console.log(parentObj); var p = parentObj.find("td:eq(7)").text(); // 하위객체의 td의 7번째 요소 값 가져오기 console.log('p === ' , p); var subObj = document.getEl..
// $("#테이블명").on("click", "tr", function(){ $("#tempList tbody").on("click", "tr", function(){ alert( $(this).find("td:eq(0)").text() ); alert( $(this).find("td:eq(1)").text() ); }); td:eq(0) -> 선택(클릭)한 row의 첫번째 데이터 -> 컬럼0 td:eq(1) -> 선택(클릭)한 row의 두번째 데이터 -> 컬럼1
jQuery를 활용해 특정값의 option값이 selected 되도록 하는 방법 $("#select_id").on("change", function(){ // 값이 1인 option 선택 $(this).val("1").prop("selected", true); // OR option 순서값으로 선택 // 첫번째 option 선택 $(this).find("option:eq(0)").prop("selected", true); }); // value 값으로 선택 $("#select_id").val("1").prop("selected", true); // OR option 순서값으로 선택 $("#select_id option:eq(0)").prop("selected", true);
$.ajax() 사용 방법 비동기 요청 시 사용하는 방법이다. index.jsp Controller package org.kyhslam.controller; import java.text.DateFormat; import java.util.Date; import java.util.Locale; import javax.servlet.http.HttpServletRequest; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotat..
$.getJSON 사용법 index.jsp JSON파일( person.json ) [ { "id": "1", "name": "Tiger Nixon" }, { "id": "2", "name": "joy" }, { "id": "3", "name": "young" } ] http://localhost:8080/ 결과화면
ready() : 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체(document)의 로딩이 끝나면 이벤트를 발생시킨다. load() : 외부에 연동된 (iframe, img, video)의 로딩이 끝나면 이벤트를 발생시킨다. hello script 메일주소 전화번호 실행을 해보면 A - > C -> onload -> DOM로딩 -> jquery -> BB 순서로 출력이 된다. 즉, $(document).ready 는 태그 등 로딩이 완료되었을 시점에 이벤트를 발생 시킨다.