IT/development

[JavaScript] ์ž์‹ ํŒ์—…์ฐฝ์—์„œ ๋ถ€๋ชจ์ฐฝ์˜ ํ•จ์ˆ˜ ํ˜ธ์ถœ(javascript ์œ„์ฃผ)

์•Œ ์ˆ˜ ์—†๋Š” ์‚ฌ์šฉ์ž 2023. 8. 13.

๋ถ€๋ชจ์ฐฝ์—์„œ ์ž์‹์ฐฝ์„ ์•„๋ž˜์ฒ˜๋Ÿผ ํŒ์—…์œผ๋กœ ์—ด์—ˆ์Œ(html ์ฝ”๋“œ๋Š” ์ƒ๋žต)

parent.html

//๋ฒ„ํŠผ ํด๋ฆญ ์‹œ child๋ผ๋Š” ํŒ์—… ํ˜ธ์ถœ
$("#btn").on("click", function() {
        //ํŒ์—… ํ˜ธ์ถœ(openPopUp()์ด๋ผ๋Š” ๊ณตํ†ตํ•จ์ˆ˜์—์„œ๋Š” ํŒ์—… ํ˜ธ์ถœํ•œ๋‹ค๊ณ  ๊ฐ€์ •)
        const popup = openPopUp("/child", 1100, 700, "child");
    });
    
//์ž์‹ ํŒ์—…์—์„œ ํ˜ธ์ถœํ•˜๋Š” ํ•จ์ˆ˜(์ž์‹์ฐฝ์—์„œ ๋„˜์–ด์˜จ ์‚ฌ์—…์ž๋ฒˆํ˜ธ, ๊ณ ๊ฐ๋ช…์„ ๋ถ€๋ชจ์˜ ํ•„๋“œ์— ์ ์šฉ)    
function chooseClient(clientBizNo, clientNm) {
      $("#clientBizNo").val(clientBizNo);
      $("#projClientNm").val(clientNm);
    }

child.html

/**
 * ๊ณ ๊ฐ ๋ชฉ๋ก์—์„œ ๊ณ ๊ฐ๋ช… ์„ ํƒ ์‹œ ๋ถ€๋ชจ์ฐฝ์˜ chooseClient() ํ˜ธ์ถœ ํ›„ ํŒ์—… ์ฐฝ ๋‹ซ๊ธฐ
 * @param clientBizNo
 * @param clientNm
 */
function onSelectClient(clientBizNo, clientNm) {
    // window.opener๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ถ€๋ชจ ์ฐฝ์˜ chooseClient ํ•จ์ˆ˜ ํ˜ธ์ถœ
    window.opener.chooseClient(clientBizNo, clientNm);
    window.close(); // ํŒ์—… ์ฐฝ ๋‹ซ๊ธฐ
}

//table tr์— ๋งˆ์šฐ์Šค ์˜ค๋ฒ„ ์‹œ ์ƒ‰์ƒ ํ‘œ์‹œ, ๋งˆ์šฐ์Šค ์˜ค๋ฒ„ ํ•ด์ œ ์‹œ ์ƒ‰์ƒ ํ•ด์ œ
$(document).on("mouseenter mouseleave", "#clientTr", function() {
  $(this).css("background-color", isHovered ? "" : "#F7BE6D");
  isHovered = !isHovered;
});

๋ถ€๋ชจ์ฐฝ์—์„œ ์ž์‹ ํŒ์—…์„ ์—ด๊ณ  ์ž์‹ ํŒ์—…์—์„œ ์„ ํƒํ•œ ๊ณ ๊ฐ๋ช… ์„ ํƒ ์‹œ ์‚ฌ์—…์ž๋ฒˆํ˜ธ, ๊ณ ๊ฐ๋ช…์„ ๋ถ€๋ชจ์ฐฝ์˜ ํ•จ์ˆ˜๋กœ ๋„˜๊ธฐ๊ณ 

๋ถ€๋ชจ์ฐฝ์—์„œ ๋„˜์–ด์˜จ ๊ฐ’์„ ํ•„๋“œ์— ์„ธํŒ…ํ•˜๋Š” ์˜ˆ์ œ

๋Œ“๊ธ€