반응형

/*
화면 설명 : 조회 조건 : 시작일, 종료일  조회버튼<br>
*/
<p><button type="button" id="selectBtn"><span>조회</span></button></p>

<p><span class="loading" style="display:none;"> <img src="common/loading.gif" alt="로딩중" > </span></p>
<script type="text/javascript">

$(window).ready(function() {

$(document).on('click', '#selectBtn', function() {

if( $('#fromDate').val() == "") {

alert("검색 시작일을 입력하세요.");

$('#fromDate').focus();

return false;

}

else if( $('#toDate').val() == "") {

alert("검색 종료일을 입력하세요.");

return false;

}

var params = {

type : 'post',

dataType : 'json',

url : '${contextPath}/test/list.do',

data : params,

success : function(obj) {

if(obj.success) {

var sb = new StringBuilder();

if (obj.data.length > 0) {

var total = obj.data.length;

$.each(obj.data, function(idx, val) {

sb.append('<tr>');

sb.sppendFormat('<td> {0} </td>', val.data1); 

sb.sppendFormat('<td> {0} </td>', val.data2); 

sb.sppendFormat('<td> {0} </td>', val.data3);

sb.append('</tr>');

});

} else {

sb.append('<tr>');

sb.append('<td colspan="3"> 해당자료가 존재하지 않습니다. </td>');

sb.append('</tr>');

}

$('$listTable > tbody').empty();

$('$listTable > tbody').html(sb.toString());

sb.empty();

} else {

alert('조회실패.' + obj.message);

}

},

beforeSend:function() {  //상태바 show

$('.loading').show();

},

complete:function() {  //상태바 hide

$('.loading').hide();

}

});

});

});

</script>

반응형

'개발 하자 빵찌니 > JQuery' 카테고리의 다른 글

JQuery 날짜변경 이벤트  (0) 2021.08.22
JQuery 같은열 셀 합치기  (0) 2018.09.09
[jquery] jquery 로 체크박스 리스트의 체크된 값  (0) 2018.08.25
jQuery row 추가 (입력창 추가), jQuery 테이블 행 추가/삭제  (0) 2018.08.25
jQuery 테이블 행 추가/삭제  (0) 2018.08.25
반응형

//시작일자를 변경 시 종료일자를 시작일자로 셋팅

$(document).on('change', '#fromDate', function() {

$('#toDate').val($('#fromDate').val());

});

 

 

//오늘날짜 구하기

function getToday(){
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;    //1월이 0으로 되기때문에 +1을 함.
    var date = now.getDate();

    month = month >=10 ? month : "0" + month;
    date  = date  >= 10 ? date : "0" + date;

    //console.log(""+year + month + date);
    return today = ""+year + month + date; 
}

 

 

//날짜 속성

$(document).ready(function(){
    var now = new Date(); //전체

    var year=now.getFullYear();//연도
 
    var month=now.getMonth()+1;//월
 
    var date=now.getDate();//일
 
    var day=now.getDay();//요일
 
    var hr=now.getHours();//시간
 
    var min=now.getMinutes();//분
 
    var sec=now.getSeconds();//초
 
  });

 

//날짜포멧 별 출력

var date = new Date();
console.log(date.toLocaleString()); // 2021. 7 24 오후 13:00:00
console.log(date.toLocaleDateString()); // 2021. 7. 24
console.log(date.toLocaleTimeString()); // 오후 13:00:00

 

//detepicker  달력

 

<!doctype html>
<html lang="kr">
<head>
  <meta charset="utf-8">
  <title>jQuery UI（Datepicker）달력 </title>
  <link rel="stylesheet" href="/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
 
   달력：<div id="datepicker"></div>
 
</body>
</html>

 

<<<결과>>>

반응형

'개발 하자 빵찌니 > JQuery' 카테고리의 다른 글

JQuery 비동기 Ajax 통신 데이터 주고 받기  (0) 2021.08.22
JQuery 같은열 셀 합치기  (0) 2018.09.09
[jquery] jquery 로 체크박스 리스트의 체크된 값  (0) 2018.08.25
jQuery row 추가 (입력창 추가), jQuery 테이블 행 추가/삭제  (0) 2018.08.25
jQuery 테이블 행 추가/삭제  (0) 2018.08.25
반응형

/*

  • 같은 값이 있는 열을 병합함

  • 사용법 : $('#테이블 ID').rowspan(0);

  • /
    $.fn.rowspan = function(colIdx, isStats) {
    return this.each(function(){ 

      var that;     
  $('tr', this).each(function(row) {      
      $('td',this).eq(colIdx).filter(':visible').each(function(col) {

          if ($(this).html() == $(that).html()
              &amp;&amp; (!isStats 
                      || isStats &amp;&amp; $(this).prev().html() == $(that).prev().html()
                      )
              ) {            
              rowspan = $(that).attr("rowspan") || 1;
              rowspan = Number(rowspan)+1;

              $(that).attr("rowspan",rowspan);

              // do your action for the colspan cell here            
              $(this).hide();

              //$(this).remove(); 
              // do your action for the old cell here

          } else {            
              that = this;         
          }          

          // set the that if not already set
          that = (that == null) ? this : that;      
      });     
  });

    });
    };

/*

  • 같은 값이 있는 행을 병합함

  • 사용법 : $('#테이블 ID').colspan (0);

  • /
    $.fn.colspan = function(rowIdx) {
    return this.each(function(){

    var that;
    $('tr', this).filter(":eq("+rowIdx+")").each(function(row) {
    $(this).find('td').filter(':visible').each(function(col) {

    if ($(this).html() == $(that).html()) {
  colspan = $(that).attr("colSpan");
  if (colspan == undefined) {
    $(that).attr("colSpan",1);
    colspan = $(that).attr("colSpan");
  }
  colspan = Number(colspan)+1;
  $(that).attr("colSpan",colspan);
  $(this).hide(); // .remove();
} else {
  that = this;
}
that = (that == null) ? this : that; // set the that if not already set

    });
    });

    });
    }

hy1a1a1a1a1hy11.12.12.12.1hy1

66hy18888hy110111212hy113111515hy21233hy21233hy11233hy11233hy21233hy21233
$(document).ready(function() {

/*

  • 특정행을 지정할때는 rowspan(행수)
  • $('#listTable ID').rowspan(0);
  • /
    $('table tbody tr:visible').each(function(cols) {
    $('#listTable').rowspan(cols);
    })

/*

  • 여기까지 대체
  • /

});

$(document).ready(function() {

$('table tbody tr:visible').each(function(row) {
$('#listTable').colspan(row);
})

});

반응형

'개발 하자 빵찌니 > JQuery' 카테고리의 다른 글

JQuery 비동기 Ajax 통신 데이터 주고 받기  (0) 2021.08.22
JQuery 날짜변경 이벤트  (0) 2021.08.22
[jquery] jquery 로 체크박스 리스트의 체크된 값  (0) 2018.08.25
jQuery row 추가 (입력창 추가), jQuery 테이블 행 추가/삭제  (0) 2018.08.25
jQuery 테이블 행 추가/삭제  (0) 2018.08.25
반응형
<form name="form1">
<input type="checkbox" name="chkList" value="1" />
<input type="checkbox" name="chkList" value="2" />
<input type="checkbox" name="chkList" value="3" />
</form>

<input type="button" value="수정" onclick="go_modify();" />
<input type="button" value="삭제" onclick="go_delete();" />

<script type="text/javascript">
function go_modify(){
  if( $(":checkbox[name='chkList']:checked").length!=0 ){
    alert("수정할 항목을 하나만 체크해주세요.");
    return;
  }
}
function go_delete(){
  if( $(":checkbox[name='chkList']:checked").length==0 ){
    alert("삭제할 항목을 하나이상 체크해주세요.");
    return;
  }
}
function get_chked_values(){
  var chked_val = "";
  $(":checkbox[name='chkList']:checked").each(function(pi,po){
    chked_val += ","+po.value;
  });
  if(chked_val!="")chked_val = chked_val.substring(1);
  return chked_val;
}
</script>

 

반응형

'개발 하자 빵찌니 > JQuery' 카테고리의 다른 글

JQuery 날짜변경 이벤트  (0) 2021.08.22
JQuery 같은열 셀 합치기  (0) 2018.09.09
jQuery row 추가 (입력창 추가), jQuery 테이블 행 추가/삭제  (0) 2018.08.25
jQuery 테이블 행 추가/삭제  (0) 2018.08.25
[JQuery] input , textarea 태그 개수 세기  (0) 2018.02.22
반응형

    
    

    

    

        
            

                정산담당자
                
                    
                    
                    
                    
                    
                
            

            

                메모
반응형

'개발 하자 빵찌니 > JQuery' 카테고리의 다른 글

JQuery 같은열 셀 합치기  (0) 2018.09.09
[jquery] jquery 로 체크박스 리스트의 체크된 값  (0) 2018.08.25
jQuery 테이블 행 추가/삭제  (0) 2018.08.25
[JQuery] input , textarea 태그 개수 세기  (0) 2018.02.22
[JQuery] 자주 사용하는 함수(show, hide, css, check, radio)  (0) 2018.02.22
반응형

<button id='btn-add-row'>행 추가하기</button>
<button id='btn-delete-row'>행 삭제하기</button>
<hr>

<table id="mytable" border="1" cellspacing="3">
  <tr>
    <th>제목</th>
    <th>일시</th>
  </tr>
  <tbody></tbody>
</table>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  $('#btn-add-row').click(function() {
    var time = new Date().toLocaleTimeString();
    $('#mytable > tbody:last').append('<tr><td>hellow </td><td>' + time + '</td></tr>');
  });
  $('#btn-delete-row').click(function() {
    $('#mytable > tbody:last > tr:last').remove();
  });
</script>

 

반응형

'개발 하자 빵찌니 > JQuery' 카테고리의 다른 글

[jquery] jquery 로 체크박스 리스트의 체크된 값  (0) 2018.08.25
jQuery row 추가 (입력창 추가), jQuery 테이블 행 추가/삭제  (0) 2018.08.25
[JQuery] input , textarea 태그 개수 세기  (0) 2018.02.22
[JQuery] 자주 사용하는 함수(show, hide, css, check, radio)  (0) 2018.02.22
[JQuery] id, class, name 별로 input value값 불러오기  (0) 2018.02.21
반응형

textarea 배열 개수 구하기




<form name='test_form'>
  <input type='button' id='btn' value='갯수' />
  <br />
  <input type='text' name='tag' />
  <input type='text' name='tag' />
  <input type='text' name='tag' />
  <input type='text' name='tag' />
  <input type='text' name='tag' />
  <br />
  <input type='textarea' name='tag1' id='t_1' value='1' />
  <input type='textarea' name='tag1' id='t_2' value='2' />
  <input type='textarea' name='tag1' id='t_3' value='3' />
  <input type='textarea' name='tag1' id='t_4' value='4' />
  <input type='textarea' name='tag1' id='t_5' value='5' />
</form>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  $("#btn").click(function() {
    alert($("input[name=tag]").length);  // text 태그 갯수 출력
    alert($("textarea[name=tag1]").length); // textarea 태그 갯수출력
    
    var cnt = $("textarea[name=tag1]").length;
    for(var i=1; i<=cnt; i++){
       alert($("textarea[id=t_"+ i +"]").val());  //textarea 태그 값 출력
    }

  });
</script>



몇개가 나올지 모르는 배열의 태그가 몇개인지 찾아 내용보여주기




반응형

'개발 하자 빵찌니 > JQuery' 카테고리의 다른 글

[jquery] jquery 로 체크박스 리스트의 체크된 값  (0) 2018.08.25
jQuery row 추가 (입력창 추가), jQuery 테이블 행 추가/삭제  (0) 2018.08.25
jQuery 테이블 행 추가/삭제  (0) 2018.08.25
[JQuery] 자주 사용하는 함수(show, hide, css, check, radio)  (0) 2018.02.22
[JQuery] id, class, name 별로 input value값 불러오기  (0) 2018.02.21
반응형

알아두면 쓸데많은 JQuery 함수 모음!!!!


1. Show 

 $("#testID").show(); //태그 ID 값을 보여준다.


2. Hide

 $("#testID").hide(); // 태그 ID 값을 숨긴다.


3. Toggle

$("#testID").toggle(); // 상태를 이전상태로 바꿔준다.  show->hide, hide->show


4. CSS

 $("#testID").css('color','blue'); // 파란색으로 변경

 $("#testID").css('width','100px'); //가로 크기 변경

 $("#divID").css('display','');  // div id 보이기

 $("#divID").css('display','none'); //div id 숨기기


5. Checkbox

1) checkbox checked 여부 :


id인 경우 : $('input:checkbox[id="checkbox_id"]').is(":checked") == true


name인 경우 : $('input:checkbox[name="checkbox_name"]').is(":checked") ==  true


또는 $('input[name="checkbox_name"]').is(":checked")



2) checkbox 전체 갯수 : $('input:checkbox[name="checkbox_name"]').length



3) checkbox 선택된 갯수 : $('input:checkbox[name="checkbox_name"]:checked').length



4) 같은 이름으로 여러개인 경우

$('input:checkbox[name="checkbox_name"]').each(function() {


      this.checked = true; //checked 처리


      if(this.checked){//checked 처리된 항목의 값


            alert(this.value); 


      }


 });



5) 값을 비교하며 checked 처리

$('input:checkbox[name="checkbox_name"]').each(function() {


     if(this.value == "비교값"){ //값 비교


            this.checked = true; //checked 처리


      }


 });


 

6) checkbox value 값 가져오기 :  $('input:checkbox[id="checkbox_id"]').val(); //단일건



7) checkbox checked 처리 하기 : $('input:checkbox[id="checkbox_id"]').attr("checked", true); //단일건



8) checkbox checked 여부 간단 확인: $("#checkbox_id"]').is(":checked"); //단일건



[예제]

1. 등급 체크

□ A    □ B     □ C     □ D    


<HTML>

<lable><input type="checkbox" name="house" value="아파트">아파트</lable>

<lable><input type="checkbox" name="house" value="빌라">빌라</lable>

<lable><input type="checkbox" name="house" value="연립">연립</lable>
<lable><input type="checkbox" name="house" value="단독">단독</lable>

<Javascript>

$("input:radio[name='house']").prop("checked", true); // 전체 선택

$("input:radio[name='house']").prop("checked", false); // 해제




6. Radio

 

<form>

    <div id='type'>

        <input type='radio' id='radio_1' name='type' value='1' />

        <input type='radio' id='radio_2' name='type' value='2' />

        <input type='radio' id='radio_3' name='type' value='3' /> 

    </div>

</form>


<script>

$("#radio_1").prop("checked", true)


$("#radio_1").attr('checked', 'checked');

</script>


======================================================================


[1. 예제]


남, 여 선택 


<HTML>

<lable><input type="radio" name="sax" value="남">남</lable>

<lable><input type="radio" name="sax" value="여">여</lable>


<Javascript>

$("input:radio[name="sex"]:radio[value='남']").prop("checked", true); // 선택

$("input:radio[name="sex"]:radio[value='남']").prop("checked", false); // 해제


7. TextArea

값 가져오기  


$("textarea#textarea_val3").val();



============================개발 새발 개발왕================================



반응형

'개발 하자 빵찌니 > JQuery' 카테고리의 다른 글

[jquery] jquery 로 체크박스 리스트의 체크된 값  (0) 2018.08.25
jQuery row 추가 (입력창 추가), jQuery 테이블 행 추가/삭제  (0) 2018.08.25
jQuery 테이블 행 추가/삭제  (0) 2018.08.25
[JQuery] input , textarea 태그 개수 세기  (0) 2018.02.22
[JQuery] id, class, name 별로 input value값 불러오기  (0) 2018.02.21
반응형

1. 히든 타입 데이터 JQuery로 가져오기 


<input type="hidden" id="user_Id" class="t_class" name="t_name" value="admin">

 

1. id 로 접근해서 가져오기

= var value = $('#user_id').val();

 

 

2. class 로 접근해서 가져오기

 

= var value = $('.t_class').val();

 

 

3. name으로 접근해서 가져오기

 

=var value = $('input[name=t_name]').val();




==========================개발 새발 개발왕===============================

반응형

'개발 하자 빵찌니 > JQuery' 카테고리의 다른 글

[jquery] jquery 로 체크박스 리스트의 체크된 값  (0) 2018.08.25
jQuery row 추가 (입력창 추가), jQuery 테이블 행 추가/삭제  (0) 2018.08.25
jQuery 테이블 행 추가/삭제  (0) 2018.08.25
[JQuery] input , textarea 태그 개수 세기  (0) 2018.02.22
[JQuery] 자주 사용하는 함수(show, hide, css, check, radio)  (0) 2018.02.22

+ Recent posts

티스토리툴바