jQuery Table에 동적 Tr 추가/삭제 하기

Open API/Jquery|2016. 11. 15. 17:23
반응형


관리자 페이지등에서 잊을만 하면 사용하는 기능인데..


그간 샘플링이 안되어서 매번 그때 그때 커스터마이징해서 썻던것인데 정리해보았습니다.


Test Url : http://www.uhoon.co.kr/test/2541.html 



<!DOCTYPE html>
<html>
<head>
    <title>테이블에 동적으로 TR 추가 /삭제 하기</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#btnAddRow").on("click",function() {
                // clone
                $.trClone = $("#memberTable tr:last").clone().html();
                $.newTr = $("<tr>"+$.trClone+"</tr>");
 
                // append
                $("#memberTable").append($.newTr);
 
                // delete Button 추가
                $.btnDelete = $(document.createElement("input"));
                $.btnDelete.attr({
                    name : "btnRemove",
                    type : "button" ,
                    value : "삭제"
                });
                $("#memberTable tr:last td:last").html("");
                $("#memberTable tr:last td:last").append($.btnDelete);
 
                // 버튼에 클릭 이벤트 추가
                $("#memberTable tr>td:last>input[type='button']").on('click', function(){
                    $(this).parent().parent().remove();
                });
            });
 
            // 초기화
            $("#tableReset").on("click",function(){ 
                $("#frmTest").each(function(){ this.reset(); });
 
                $("input[name='btnRemove']").each(function () {
                    $(this).trigger('click');
                });
            });
        });
    </script>
</head>
 
<body >
<div style="width:500px;text-align:right;">
    <input type="button" value="행추가"  id="btnAddRow" />
    <input type="button" value="reset" id="tableReset"/>
</div>
 
 
<form method="post" id="frmTest">
<table id="memberTable" border="1" style="width:500px;">
    <tr>
        <td><input type="text" id="fullName" /></td>
        <td><input type="text" id="age"  /></td>
        <td><input type="text" id="addr" /></td>
        <td style="width:50px;"></td>
    </tr>
</table>
</form>
</body>
</html>


저작자표시

댓글()

jQuery 한글/영어 byte 체크해서 자르기

Open API/Jquery|2016. 11. 15. 17:21
반응형



SMS 발송 폼 처리 중 80 바이트 체크하기 위해서..

사용 편의를 위해 일부 내용이 수정되었습니다.


원개발자분께 감사드립니다. ( http://blog.naver.com/yesdouble/130152964039 )


Test Url : http://www.uhoon.co.kr/test/2410.html

<!DOCTYPE html>
<html>
<head>
	<title>한글/영어 byte 체크해서 자르기</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
</head>
<body >
<script type="text/javascript">
	$(function () {
		$('.remaining').each(function () {
			// count 정보 및 count 정보와 관련된 textarea/input 요소를 찾아내서 변수에 저장한다.
			var $maxcount = $('.maxcount', this);
			var $count = $('.count', this);
			var $input = $("#contents");

			// .text()가 문자열을 반환하기에 이 문자를 숫자로 만들기 위해 1을 곱한다.
			var maximumByte = $maxcount.text() * 1;
			// update 함수는 keyup, paste, input 이벤트에서 호출한다.
			var update = function () {
				var before = $count.text() * 1;
				var str_len = $input.val().length;
				var cbyte = 0;
				var li_len = 0;
				for (i = 0; i < str_len; i++) {
					var ls_one_char = $input.val().charAt(i);
					if (escape(ls_one_char).length > 4) {
						cbyte += 2; //한글이면 2를 더한다
					} else {
						cbyte++; //한글아니면 1을 다한다
					}
					if (cbyte <= maximumByte) {
						li_len = i + 1;
					}
				}
				// 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.
				if (parseInt(cbyte) > parseInt(maximumByte)) {
					alert('허용된 글자수가 초과되었습니다.\r\n\n초과된 부분은 자동으로 삭제됩니다.');
					var str = $input.val();
					var str2 = $input.val().substr(0, li_len);
					$input.val(str2);
					var cbyte = 0;
					for (i = 0; i < $input.val().length; i++) {
						var ls_one_char = $input.val().charAt(i);
						if (escape(ls_one_char).length > 4) {
							cbyte += 2; //한글이면 2를 더한다
						} else {
							cbyte++; //한글아니면 1을 다한다
						}
					}
				}
				$count.text(cbyte);
			};
			// input, keyup, paste 이벤트와 update 함수를 바인드한다
			$input.bind('input keyup keydown paste change', function () {
				setTimeout(update, 0)
			});
			update();
		});
	});
</script>
<div>
<textarea rows="5" cols="50" id="contents"/></textarea>
</div>
<span class="remaining">
	<span class="count">0</span>/<span class="maxcount">80</span>byte(한글 40자, 영어 80자)
</span>
</body>
</html>


저작자표시

댓글()

jQuery 동적으로 추가된 객체에 datepicker() 적용하기

Open API/Jquery|2016. 11. 15. 17:17
반응형




동적으로 추가(append)되거나 복제된(clone) 객체에서 


DatePicker()가 작동하지 않는 문제가 확인되어


구글링을 통해 방법들을 찾아보니 hasDatepicker Class가 문제 인지라..


해당 클래스 제거 후 다시 DatePicker 설정을 해줘야 작동합니다.




// 지정된 객체 처리시
$(this).removeClass('hasDatepicker').datepicker();
 
// 클래스를 이용한 처리
$(document).find(".JCaldendar").removeClass('hasDatepicker').datepicker({
    dateFormat: "yy-mm-dd",
    defaultDate: "+1w",
    numberOfMonths: 1,
    changeMonth: true,
    showMonthAfterYear: true ,
    changeYear: true
});


참고 Url : 
http://pdw213.egloos.com/4209246
http://www.sitekickr.com/blog/jquery-datepicker-work-cloned-elements/


저작자표시

댓글()

jQuery defaultValue 가져오기

Open API/Jquery|2016. 11. 15. 14:56
반응형



Jquery 로 defaultValue 읽어오기


종종 필요한 기능인데 페이지 로딩 시 있던 기본 값을 가져오는 기능입니다.


참고 Url : http://stackoverflow.com/questions/4591889/get-default-value-of-an-input-using-jquery




$("#XXX").prop("defaultValue")



저작자표시

댓글()

jQuery 스크롤 따라 다니는 배너

Open API/Jquery|2016. 11. 11. 09:40
반응형



Plugin Url : http://kitchen.net-perspective.com/open-source/scroll-follow/


Test Url : http://www.uhoon.co.kr/test/2148.html



스크롤 따라다니는 배너(?) 입니다..

배너 광고 , 오늘 본 상품 등등에 많이 사용되고 있습니다.


상세 소스는 Test Url 소스를 봐주세요!

저작자표시

댓글()

jQuery Tree 메뉴만들기

Open API/Jquery|2016. 11. 11. 09:37
반응형



원문 Url : http://htglss.tistory.com/100




+ - 아이콘을 이용한 Jquery Tree 메뉴 샘플입니다..



만든이 분께서 소녀시대팬이신것같아서...샘플은 그대로 유지했습니다 .


아직 만들어볼 생각은 못하고 서치 서치 하고 있지만 제가 아는 중 가장 간단한 방법이 아닌가 싶어서 공유하고 싶네요..


Test Url : http://www.uhoon.co.kr/test/1925/1925.html

저작자표시

댓글()

jQuery 자동 Submit 방지 및 Enter Key 체크하기

Open API/Jquery|2016. 11. 11. 09:34
반응형



폼내에 input 객체가 하나뿐인 경우 엔터키를 입력하게 되면 자동으로 폼 Submit()이 되는데


어떤 경우에는 이것을 막아야 할 경우가 발생합니다..


이를 방지 하기 위한 방법입니다.


form 에서 onsubmit 에 return false; 값을 추가해 주고 


필요한 경우 keyup 되는 경우 키값에 따라 필요한 코딩을 추가해줍니다.


TEST Url : http://www.uhoon.co.kr/test/1907.html



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>auto submit 방지 및 Key Code 체크하기</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
    $(function() {
        $("#name").on("keyup", function(e){
 
            $("#keyCode").html(e.which);
 
            if(e.which==13)
            {
                alert("enter Key");
            }
        });
    });
</script>
</head>
<body>
<form id="frm" onsubmit="return false;" >
    <input type="text" id="name" />
    <label for="code">Key Code : </label><span id="keyCode"></span>
</form>
</body>
</html>


저작자표시

댓글()

jQuery 상하 좌우 자동 롤링 배너

Open API/Jquery|2016. 11. 11. 09:32
반응형



Plugin Url : http://songsungkyun.cafe24.com/jqueryrolling/index.html


Test Url :  http://www.uhoon.co.kr/test/1891.html



부드럽게 롤링되는 배너 


가로로 , 세로로 무한 롤링~

저작자표시

댓글()
이전 1 ··· 4 5 6 7 8 9 10 11 다음

티스토리툴바