728x90

목동코딩,코딩교육

function deleteOerder(obj) {

   $("#" + obj.id).closest('tr').remove();
}

var row = "";
row = row + "<tr>";

row = row +
    "<td><input id='" + resArray[0] +
    "' name='ItemCode' class='btn btn-secondary' onclick='deleteOerder(this);' type='button' value='" +
    '삭제' +
    "' style='width: 80%;padding: 0;border-radius: 0.4rem;font-size: 1.45rem;border-color: white;'></td>";
row = row +
    "<td ><input name='DispLetter'  type='text' value='" + resArray[1] +
    "' style='width: 100%;' disabled></td>";
row = row + "<td ><input name='ItemName'  type='text' value='" + resArray[2] +
    "' style='width: 100%;' disabled></td>";
row = row + "<td ><input name='Price'  type='text' value='" + comma(resArray[3]) +
    "' style='width: 100%;text-align:right;padding-right:10px;' disabled></td>";
row = row +
    "<td ><input   name='Cnt' onchange='reCalcu();'  type='number' value='1' min='1' style='width: 100%;' ></td>";

row = row + "</tr>";
$('#orderItems').append(row);
var totSum1 = uncomma($('#buySum').val());
var totSum2 = uncomma(resArray[3]);
var totSum = (parseInt(totSum2) + parseInt(totSum1)).toString();

$('#buySum').val(comma(totSum));
          
});
728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩, 웹페이지 개발, 원하는 input 값 읽어오기  (0) 2021.09.23
목동코딩, Asp.net mvc EF에서 Data 추가하는 방법  (0) 2021.09.23
목동코딩, Html Ajax 복수의 Input에서 value값 가져오는 방법!  (0) 2021.09.18
목동코딩학원, Html, Modal 폼 열고 닫는 방법  (0) 2021.09.15
목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법  (0) 2021.09.15
728x90

목동코딩: 코딩수업

​

아래의 화면에서 복수의 input의 value를 가져와서 DB에 저장하는 방법과 새로운 table row를 만들어서 새로운 record를 추가하는 방법입니다.

 

<script>
    function addItems() {
        $("input[name=ItemCode]").each(function(idx) {
            // 해당 input Value 가져오기
            var id = $(this).attr('id');
            var ItemCode = $("input[name=ItemCode]:eq(" + idx + ")").val();
            console.log(id + ":" + ItemCode);
        });

        var ret = confirm("항목을 추가하시겠습니까?");
         if(!ret){
            return false;
        }
        var row = "";
        row = row + "<tr>";

        row = row + "<td><input  type='button' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";
        row = row + "<td><input  type='text' value='' style='width: 100%;'></td>";

        row = row + "</tr>";
        $('#itemsTable').append(row);
}
</script>

<table id="itemsTable" class="table table-striped">
  <th width="5%">
    삭제
  </th>
  <th  width="5%">
    기호
  </th>
  <th  width="20%">
    품명
  </th>
  <th  width="10%">
    가격
  </th>
  <th  width="60%">
    설명
  </th>
</tr>
</table>

 

 

 

목동코딩 전문적인 코딩교육

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩, Asp.net mvc EF에서 Data 추가하는 방법  (0) 2021.09.23
목동코딩,Ajax Click으로 Delete Table Row  (0) 2021.09.20
목동코딩학원, Html, Modal 폼 열고 닫는 방법  (0) 2021.09.15
목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법  (0) 2021.09.15
목동코딩, html, Input 입력 유효성 체크하는 방법  (0) 2021.09.15
728x90

목동코딩: 코딩교육

​

필요에 따라서 모달폼을 열고 닫는 방법

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://code.jquery.com/jquery-latest.js"></script>
	<title>Document</title>
	<style>
        /* The Modal (background) */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgb(0,0,0); 
            background-color: rgba(0,0,0,0.4); 
        }
    
        /* Modal Content/Box */
        .modal-content {
            background-color: #ffffff;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 30%; /* Could be more or less, depending on screen size */                          
        }
 
</style>

</head>
<body>
	<input type="button" onclick="open_pop();" value="open" />
	    <!-- The Modal -->
		<div id="myModal" class="modal">
 
			<!-- 모달폼 시작 -->
			<div class="modal-content" style="background-color: #000000;">
				<img class="bd-placeholder-img" width="100%"
                        src="http://nooh-system.com/images/logo_nooh_white.png" aria-hidden="true"
                        preserveAspectRatio="xMidYMid slice" focusable="false">
					  <p style="text-align: center;"><span style="font-size: 14pt;"><b><span style="font-size: 24pt;">공지</span></b></span></p>
					  <p style="text-align: center; line-height: 1.5;"><br />여기에 내용</p>
					  <p><br /></p>
				  <div style="cursor:pointer;background-color:#DDDDDD;text-align: center;padding-bottom: 10px;padding-top: 10px;" onClick="close_pop();">
					  <span class="pop_bt" style="font-size: 13pt;" >
						   닫기
					  </span>
				  </div>
			</div>
	   
		  </div>
			  <!--모달폼 종료-->
	  
	  
			  <script type="text/javascript">      
				jQuery(document).ready(function() {						
				});
				//팝업 보기
				function open_pop() {
					 $('#myModal').show();
				};

                //팝업 단기
				function close_pop(flag) {
					 $('#myModal').hide();
				};
				
			</script>

</body>
</html>

 

 

목동코딩학원 코딩교육

 

 

http://nooh-system.com/

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩,Ajax Click으로 Delete Table Row  (0) 2021.09.20
목동코딩, Html Ajax 복수의 Input에서 value값 가져오는 방법!  (0) 2021.09.18
목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법  (0) 2021.09.15
목동코딩, html, Input 입력 유효성 체크하는 방법  (0) 2021.09.15
목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법  (0) 2021.09.14
728x90

목동코딩:

이번에하는 프로젝트는 이미지를 많이 다루는 사이트이다. 컴퓨터에서 보기에는 불편함이 없으나, 모바일에서 보려면 아무래도 확대해서 표시해야 할거 같아서 구글 검색으로 적용한 방법임

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
    <style>
		.enLargeFrame {
			position: absolute;
			display: none;
			justify-content: center;
			align-items: center;
			top:0%;
			width:100%;
			height:100%;
			background-color: gray; 
			z-index: 100;
			background:rgba(255,255,255,0.5);
		}
		.enLarge {
			position: relative;
			display:flex;
			justify-content: center;
			align-items: center;
		}
		
		.enLarge img {
			width:100%;
		}
	</style>
</head>
<body>
	<h1>이미지 크게보기</h1>
	<hr>
	<div class='enLargeFrame'>
		<div class='enLarge'>
		</div>
	</div>
	<img src="http://nooh-system.com/images/logo_nooh_white.png"> 
	<img src="http://nooh-system.com/assets/img/portfolio/4.jpg"> 
</body>
<script type="text/javascript">
	$(document).ready(function (e){
		
		$(document).on("click","img",function(){
			var path = $(this).attr('src')
			showImage(path);
		}); 
		
		function showImage(fileCallPath){
		    
		    $(".enLargeFrame").css("display","flex").show();		    
		    $(".enLarge")
		    .html("<img src='"+fileCallPath+"' >")
		    .animate({width:'100%', height: '100%'}, 1000);		    
		  } 	  
		$(".enLargeFrame").on("click", function(e){
		    $(".enLarge").animate({width:'0%', height: '0%'}, 1000);
		    setTimeout(function(){
		      $('.enLargeFrame').hide();
		    }, 1000);
		  }); 
	});
</script>
</html>

목동코딩 프로젝트 코딩교육

 

목동코딩 프로젝트 코딩교육

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩, Html Ajax 복수의 Input에서 value값 가져오는 방법!  (0) 2021.09.18
목동코딩학원, Html, Modal 폼 열고 닫는 방법  (0) 2021.09.15
목동코딩, html, Input 입력 유효성 체크하는 방법  (0) 2021.09.15
목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법  (0) 2021.09.14
목동코딩학원, html ,부트스트랩 텍스트 크기 및 비교 샘플  (0) 2021.09.07
728x90

목동코딩:

프로젝트를 하다보면 꼭 필요한 부분이 입력 유효성 체크이다.

예전에 POS를 개발할 때 절실히 느껴던 부분이다.

개발하는 입장에서는 에러가 안나게 잘 입력해 주지만 ㅎㅎ , 일반 사용자는 그렇지 않기에 다양한 입력 검증 방식이 필요하다.

가령 금액을 입력하는데 문자를 입력하는 경우등이다. 이러한 경우를 예상하지 않으면 그냥 시스템이 죽어 버리곤 했다. 세월이 많이 흐른 지금도 키코드를 이용하여 비교하는 방식은, 예전에 코볼로 개발할 때 랑도 비슷한 느낌이다. 세월이 흘러도 원리는 변하지 않느거 같다. 그래서 학생들도 원리를 궁금해 하면서 공부 해야 한다는 생각이다.

 

$(document).ready(function () {
    // Number only
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/[^0-9]/g,'');
        }
    });
    //Number & dot
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/[^0-9\.]/g,'');
        }
    });
    //Amount
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = $.number(this.value,0); //jquery.number.js
        }
    });
    //Number & '-'
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/^[-]|[^0-9-]/gi,'');
        }
    });
    //Alpha & Number & '-'
    $('#id').keyup(function (e) {
        if(!((e.keyCode >= 37 && e.keyCode <= 40) || (e.keyCode == 46))){
            this.value = this.value.replace(/[^a-zA-Z0-9\\-]+$/i,'');
        }
    });
});

 

 

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, Html, Modal 폼 열고 닫는 방법  (0) 2021.09.15
목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법  (0) 2021.09.15
목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법  (0) 2021.09.14
목동코딩학원, html ,부트스트랩 텍스트 크기 및 비교 샘플  (0) 2021.09.07
목동코딩학원, html, css, DB에서 가져온, 텍스트 줄 맞추는 방법  (0) 2021.08.17
728x90

목동코딩:

프로젝트를 하다보면 사용하는 언어마다 숫자에 컴마를 표시하는 방법이 조금씩 다르다.

Php에서 컴마를 찍는 방법은 또 조금 다르다. 이번엔 자바스크립트에서 컴마를 표시하거나, 컴마를 제거하는 함수를 정리해둔다.

<script>
    $(document).ready(function() {

        $('input[name=saleAmount]').attr('value', comma("111222333"));
    });

    //콤마찍기
    function comma(str) {
        str = String(str);
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
    }

    //콤마풀기
    function uncomma(str) {
        str = String(str);
        return str.replace(/[^\d]+/g, '');
    }
    </script>

목동코딩 코딩수업

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, Html, Javascript 크릭시 이미지 크게하는 방법  (0) 2021.09.15
목동코딩, html, Input 입력 유효성 체크하는 방법  (0) 2021.09.15
목동코딩학원, html ,부트스트랩 텍스트 크기 및 비교 샘플  (0) 2021.09.07
목동코딩학원, html, css, DB에서 가져온, 텍스트 줄 맞추는 방법  (0) 2021.08.17
목동코딩,html, Ajax , <input type="date" > , 오늘 날자 설정과 날자 더하는 방법  (0) 2021.08.11
728x90

목동코딩: 부트스랩을 이용하여 사이트를 개발할때 글씨 크기를 한눈에 비교하도록 정리된 html 파일입니다

<!DOCTYPE html>
<html lang="ko">
   <head>
      <meta charset="utf-8">
   </head>
   <body>
      <style type="text/css">@import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css");</style>
      <style type="text/css">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");</style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

      <div class="container">
         <h6>h6</h6>
         <h5>h5</h5>
         <h4>h4</h4>
         <h3>h3</h3>
         <h2>h2</h2>
         <h1>h1</h1>
         <h1 class="size-4">size-4</h1>
         <h1 class="size-3">size-3</h1>
         <h1 class="size-2">size-2</h1>
         <h1 class="size-1">size-1</h1>
         <h1 class="size-4 font-weight-bold">size-4 font-weifht-bold</h1>
         <h1 class="size-4 font-italic">size-4 font-italic</h1>
         <h1 class="size-4 font-left">size-4 font-left</h1>
         <h1 class="size-4 font-center">size-4 font-center</h1>
         <h1 class="size-4 font-right">size-4 font-right</h1>
         <h1 class="size-4 text-primary">size-4 text-primary</h1>
         <h1 class="size-4 text-seconday">size-4 text-secondary</h1>
         <h1 class="size-4 text-success">size-4 text-success</h1>
         <h1 class="size-4 text-danger">size-4 text-danger</h1>
         <h1 class="size-4 text-warning">size-4 text-warning</h1>
         <h1 class="size-4 text-info">size-4 text-info</h1>
         <h1 class="size-4 text-light">size-4 text-light</h1>
         <h1 class="size-4 text-dark">size-4 text-dark</h1>
         <h1 class="size-4 text-muted">size-4 text-muted</h1>
         <h1 class="size-4 text-white">size-4 text-white</h1>
         <h1 class="size-4 text-white bg-primary">size-4 text-white bg-primary</h1>
         <h1 class="size-4 text-white bg-secondary">size-4 text-white bg-secondary</h1>
         <h1 class="size-4 text-white bg-danger">size-4 text-white bg-danger</h1>
         <h1 class="size-4 bg-warning">size-4 bg-warning</h1>
         <h1 class="size-4 text-white bg-info">size-4 text-white bg-info</h1>
         <h1 class="size-4 bg-light">size-4 bg-light</h1>
         <h1 class="size-4 text-white bg-darky">size-4 text-white bg-dark</h1>
      </div>

   </body>
</html>

 

 

 

목동코딩학원 코딩교육 프로젝트교육

 

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩, html, Input 입력 유효성 체크하는 방법  (0) 2021.09.15
목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법  (0) 2021.09.14
목동코딩학원, html, css, DB에서 가져온, 텍스트 줄 맞추는 방법  (0) 2021.08.17
목동코딩,html, Ajax , <input type="date" > , 오늘 날자 설정과 날자 더하는 방법  (0) 2021.08.11
목동코딩학원,자바스크립트 FORM 필드 추가해서 새 페이지 여는 방법  (0) 2021.08.09
728x90

목동코딩:

웹사이트를 개발하면서, datebase에서 가져온 내용을 표시하다 보면 표시할 글자수의 차이로 인하여, 아래의 사진과 같이 페이지가 일그러지는 현상이 발생한다.

이 부분을 구글 개발자 모드에서 이미 표시된 css를 막고서 화면을 보면 잘 표시되건 페이지가 찌그러진다

 

element.style {

/* overflow: hidden; */

/* text-overflow: ellipsis; */

/* white-space: nowrap; */

}

목동코딩학원 코딩교육

 

이제 다시 원래대로 다시 3개의 css 를 체크하고 확인하면, 다시 원래대로 이쁘게 표시된다.

넘치는 글자수는 ... 으로 바뀌어서 표현이 된다.

​

element.style {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

목동코딩학원 코딩교육

 

728x90
저작자표시 비영리 변경금지

'코딩교육 > Web' 카테고리의 다른 글

목동코딩학원, Ajax로 숫자에 컴마표시, 컴마제거 하는방법  (0) 2021.09.14
목동코딩학원, html ,부트스트랩 텍스트 크기 및 비교 샘플  (0) 2021.09.07
목동코딩,html, Ajax , <input type="date" > , 오늘 날자 설정과 날자 더하는 방법  (0) 2021.08.11
목동코딩학원,자바스크립트 FORM 필드 추가해서 새 페이지 여는 방법  (0) 2021.08.09
목동코딩학원, php 서버의 폴더 존재 확인후,폴더 만들기  (0) 2021.08.08

+ Recent posts

티스토리툴바