table vertical scroll

==== css

table.scroll {

   width: 100%; 

   border-spacing: 0;   

   border: 2px solid black;

}

table.scroll tbody,table.scroll thead { display: block; }

thead tr th {

   height: 30px;   

   line-height: 30px;   

}

table.scroll tbody {

   height: 100px;   

   overflow-y: auto;   

   overflow-x: hidden;

   }

tbody { border-top: 2px solid black; }

tbody td, thead th {

   width: 20%; /* Optional */   border-right: 1px solid black;}

tbody td:last-child, thead th:last-child {

   border-right: none;}

==== jquery

var $table = $('table.scroll'),

    $bodyCells = $table.find('tbody tr:first').children(),

    colWidth;

$(window).resize(function() {

    

    colWidth = $bodyCells.map(function() {

        return $(this).width();

    }).get();

    

 

    $table.find('thead tr').children().each(function(i, v) {

        $(v).width(colWidth[i]);

    });    

}).resize();

=== html

<table class="scroll">

    <thead>

        <tr>

            <th>Head 1</th>

            <th>Head 2</th>

            <th>Head 3</th>

            <th>Head 4</th>

            <th>Head 5</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Content 1</td>

            <td>Content 2</td>

            <td>Content 3</td>

            <td>Content 4</td>

            <td>Content 5</td>

        </tr>

        <tr>

            <td>Content 1</td>

            <td>Lorem ipsum dolor sit amet.</td>

            <td>Content 3</td>

            <td>Content 4</td>

            <td>Content 5</td>

        </tr>

        <tr>

            <td>Content 1</td>

            <td>Content 2</td>

            <td>Content 3</td>

            <td>Content 4</td>

            <td>Content 5</td>

        </tr>

        <tr>

            <td>Content 1</td>

            <td>Content 2</td>

            <td>Content 3</td>

            <td>Content 4</td>

            <td>Content 5</td>

        </tr>

        <tr>

            <td>Content 1</td>

            <td>Content 2</td>

            <td>Content 3</td>

            <td>Content 4</td>

            <td>Content 5</td>

        </tr>

        <tr>

            <td>Content 1</td>

            <td>Content 2</td>

            <td>Content 3</td>

            <td>Content 4</td>

            <td>Content 5</td>

        </tr>

        <tr>

            <td>Content 1</td>

            <td>Content 2</td>

            <td>Content 3</td>

            <td>Content 4</td>

            <td>Content 5</td>

        </tr>

    </tbody>

</table>

Select option up/down

 <script type="text/javascript"> 

  function moveOption(updown, refId){
  if(typeof $("#" + refId + " option:selected").val()=="undefined"){
alert("None Selected");
return false;
}

if(updown=="up"){
  $("#" + refId + " option:selected:first-child").prop("selected", false);
  before = $("#" + refId + " option:selected:first").prev();
    $("#" + refId + " option:selected").detach().insertBefore(before);
}else{
$("#" + refId + " option:selected:last-child").prop("selected", false);
after = $("#" + refId + " option:selected:last").next();
$("#" + refId + " option:selected").detach().insertAfter(after);
}
  }

  $().ready(function() {  

$('.up-button').click(function(){
var refId=$(this).attr("ref-id");
moveOption("up", refId);
});

$('.down-button').click(function(){
var refId=$(this).attr("ref-id");
moveOption("down", refId);
});

$('#select1').find('option').css("height", "20px");
$('#select1').find('option').css("padding-top", "9px");

$('#select2').find('option').css("height", "20px");
$('#select2').find('option').css("padding-top", "9px");
  });  
 </script>  

<form> 

<div>  
  <select multiple id="select1" name="select1">
    <option value="pankaj">aasfddf</option>   
    <option value="aashish">basdfsfd</option>   
    <option value="vikram">casdfasdf</option>   
    <option value="mohit">dasdfasdf</option>  
  </select>  
  <table>
<tr>
<td>
<input type="button" class="up-button" ref-id="select1" value="&#9650;"> <input type="button" class="down-button" ref-id="select1" value="&#9660;">
</td>
</tr>
</table>  
</div> 
<div>  
  <select multiple id="select2" name="select2">
    <option value="pankaj">aasfddf</option>   
    <option value="aashish">basdfsfd</option>   
    <option value="vikram">casdfasdf</option>   
    <option value="mohit">dasdfasdf</option>  
  </select>  
  <table>
<tr>
<td>
<input type="button" class="up-button" ref-id="select2" value="&#9650;"> <input type="button" class="down-button" ref-id="select2" value="&#9660;">
</td>
</tr>
</table>  
</div>  
<br>
<input type="submit" value="Submit">
</form>

ajax cross domain

@RequestMapping(value="/crossAjax")

@ResponseBody

public String crossAjax(HttpServletRequest request){

String callback=request.getParameter("callback");

System.out.println("-----" + callback);

System.out.println("-----" + request.getParameter("query"));

JSONObject obj=new JSONObject();

try {

obj.put("message", "test1");

obj.put("time", "test1");

} catch (JSONException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

System.out.println(obj.toString());

return callback + "(" + obj.toString() + ")"; 

}

        $.ajax({

               url : "http://127.0.0.1:8080/home/crossAjax",

       data : {query:"select * from ssssss"},

       dataType : "jsonp",

       jsonp : "callback",

       success: function(data) {

   console.log('성공 - ', data);

       },

               error: function(xhr) {

  alert('실패 - ' +  xhr.statusText);

       }

        });

postgresql update or insert

CREATE TABLE test2 (id integer primary key, b varchar(10), c varchar(10), dt timestamp with time zone);

UPDATE test2 SET dt=CURRENT_TIMESTAMP WHERE id=1;
INSERT INTO test2 (id, b, c, dt)
       SELECT 1,'xxx', 'xZ', CURRENT_TIMESTAMP
       WHERE NOT EXISTS (SELECT 1 FROM test2 WHERE id=1);

fixed head table2

<style>
   html,
    body {
        font-family: 'Lato', sans-serif;
        width: 100%;
        height: 100%;
        margin:0;
       
    }
    body
    {
        min-height: 100%;
        overflow: hidden;
    }



#lordly {
        position:relative;
       width: 100%;
       height: 100%;
     
    }
    #leftCol{
        position:absolute;
        bottom:0;
       
        width:200px;
        height:100%;
        background-color: #ffffff;
        border-right: 1px solid #efefef;
       
    }
    #contentCol{
        padding-left:210px;
        padding-right:10px;
        height:100%;
        min-height: 100%;
       
       
        background-color: #ffffff;
        overflow-x: scroll;
    }








.scroll {
    width: 100%; /* Optional */
    border-collapse: collapse;
    border-spacing: 0;
    border: 2px solid black;
    overflow-x: scroll;
   
}

.scroll tbody,
.scroll thead { display: block; }

thead tr th {
    height: 30px;
    line-height: 30px;
    /* text-align: left; */
}

.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
    /* width: 20%; */ /* Optional */
    border-right: 1px solid black;

    white-space: nowrap;
    padding:10px;
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}








/*table {
        border-collapse: collapse;
        width: 100%;
       
        overflow-x: scroll;
        display: block;

        padding-bottom:20px;
    }
    thead {
        background-color: #EFEFEF;
    }
    thead, tbody {
        display: inline-block;
    }
    tbody {
        overflow-y: scroll;
        overflow-x: hidden;
    }
    tr {
        height: 25px;
        border-bottom: 1px solid #efefef;
    }
    td, th {
        padding:4px;
        min-width: 70px;
        border: solid 1px #efefef;
    }*/
</style>
<script language="javascript">
        $(function(){
           $('tbody').css('height', $(window).height() - 80 );


         

           // $(window).resize(function() {
           
           //      $('tbody').css('height', $(window).height() - 80 );
           // });

            $('table').on('scroll', function () {
               
                $("table > *").width($("table").width() + $("table").scrollLeft());
                console.log($("table > *"));
            });

           
        });
   
    </script>
</head>
<body>
<div id="lordly">
    <div id="leftCol">left</div>
    <div id="contentCol">
            <div id="t-title">title</div>




            <table class="scroll">
                <thead>
                    <tr>
                        <th>Head 1 yyyy </th>
                        <th>Head 2</th>
                        <th>Head 3</th>
                        <th>Head 4</th>
                        <th>Head 5</th>
                        <th>Head 1</th>
                        <th>Head 2</th>
                        <th>Head 3</th>
                        <th>Head 4</th>
                        <th>Head 5</th>
                        <th>Head 1</th>
                        <th>Head 2</th>
                        <th>Head 3</th>
                        <th>Head 4</th>
                        <th>Head 5</th>
                        <th>Head 1</th>
                        <th>Head 2</th>
                        <th>Head 3</th>
                        <th>Head 4</th>
                        <th>Head 5</th>
                        <th>Head 1</th>
                        <th>Head 2</th>
                        <th>Head 3</th>
                        <th>Head 4</th>
                        <th>Head 5</th>
                   

                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Content 1 ---------------- </td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                    </tr>
                   
                </tbody>
            </table>
            <div id="cleared"></div>
        </div>
    </div>



    <script language="javascript">

        var $table = $('table.scroll'),
            $bodyCells = $table.find('tbody tr:first').children(),
            colWidth;

       
        $(window).resize(function() {
            colWidth = $bodyCells.map(function() {
                return $(this).width();
            }).get();
           
            $table.find('thead tr').children().each(function(i, v) {
                $(v).width(colWidth[i]);
            });  
        }).resize();

</script>

table header fix + tbody scroll

<style>
html,
body {
font-family: 'Lato', sans-serif;
   width: 100%;
   height: 100%;
   margin:0;

}
body
{
min-height: 100%;
   overflow: hidden;
}

#lordly {
position:relative;
  width: 100%;
  height: 100%;
 
}
#leftCol{
position:absolute;
        bottom:0;

width:200px;
height:100%;
background-color: #ffffff;
border-right: 1px solid #efefef;

}
#contentCol{
padding-left:210px;
padding-right:10px;
height:100%;
min-height: 100%;


background-color: #ffffff;
}
#t-title{
height:34px;
}

.rum-table {

   border-collapse: collapse;
   /*width: 100%;*/
   overflow-x: scroll;
   display: block;
   padding-bottom:20px;
   background-color:red;
}
.rum-table > thead {
   background-color: #EFEFEF;
}
.rum-table > thead, .rum-table > tbody {
   display: inline-block;
}
.rum-table > tbody {
   overflow-y: scroll;
   overflow-x: hidden;
}
.rum-table > tbody > tr {
   height: 35px;
   border-bottom: 1px solid #efefef;
}
.rum-table > tbody > tr > td, .rum-table > thead > tr > th {
padding:4px;
   min-width: 70px;
   border: solid 1px #efefef;
}

.tool-float{
position:relative;
float:right;
right:0px;
height:100%;
width:80px;
background-color: #cccccc;

}
.tool-float ul{
list-style: none;
padding-left:0px;
}
.tool-float ul > li{
white-space: nowrap;
width: 1%;
}
</style>

</head>
<body>

<div id="lordly">
<div id="leftCol">left</div>
<div id="contentCol">
 
<div id="t-title">title</div>

<table class="rum-table">
<thead>
                    <tr>
                   
                        <th width="*">
                            제목1
                        </th>
                        <th width="*">
                            제목2
                        </th>
                        <th width="*">
                            제목3
                        </th>
                        <th width="*">
                            제목4
                        </th>
                        <th width="*">
                            제목5
                        </th>
                        <th width="*">
                            제목6
                        </th>
                        <th width="*">
                            제목7
                        </th>
                        <th width="*">
                            제목8
                        </th>
                        <th width="*">
                            제목9
                        </th>
                        <th width="*">
                            제목10
                        </th>
                        <th width="*">
                            제목11
                        </th>
                        <th width="*">
                            제목12
                        </th>
                        <th width="*">
                            제목13
                        </th>
                        <th width="*">
                            제목14
                        </th>
                        <th width="*">
                            제목15
                        </th>
                        <th width="*">
                            제목16
                        </th>
                    </tr>
                </thead>
                <tbody>
<tr>

<td>asdflk </td>
<td> asdfasf </td>
<td> asdfsfd </td>
<td> adfsdfsdf</td>
<td>asdflk </td>
<td> asdfasf </td>
<td> asdfsfd </td>
<td> adfsdfsdf</td>
<td>asdflk </td>
<td> asdfasf </td>
<td> asdfsfd </td>
<td> adfsdfsdf</td>
<td>asdflk </td>
<td> asdfasf </td>
<td> asdfsfd </td>
<td> adfsdfsdf</td>
</tr>

</tbody>
</table>


</div>

<script language="javascript">
$(function(){


$('.rum-table tbody').css('height', $(window).height() - 80 );

  $(window).resize(function() {
 
       $('.rum-talbe tbody').css('height', $(window).height() - 80 );
  });

$('.rum-table').on('scroll', function () {
console.log($("table").scrollLeft());
//$(".rum-table").scrollTop()
   $(".rum-table > *").width($(".rum-table").width() + $(".rum-table").scrollLeft());
});
});
</script>
<div id="cleared"></div>
</div>

dropdown menu

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ page session="false" %>

<!doctype html>

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->

<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->

<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>

  <meta charset="utf-8" />

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  <title>Cross Domain</title>

  <meta name="description" content="Testing Iframe Height plugin" />

  <meta name="author" content="Ilker Guller" />

  <meta name="viewport" content="width=device-width">

    <!-- Latest compiled and minified CSS -->

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  

  

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

  

  <style>

html, body{

height: 100%; overflow:hidden;

}

body { margin: 0; }

.snm-menu-bar {

  background: #0c4da2;

  display: inline-block;

  width: 100%;

}

.snm-menu { margin: 0; padding: 0; }

.snm-menu li {

  float: left;

  list-style:none;

  position: relative;

}

.snm-menu li:hover { background: white; }

.snm-menu li:hover>a { color: #0c4da2; }

.snm-menu a {

  color: white;

  display: block;

  padding: 10px 20px;

  text-decoration: none;

}

.snm-menu ul {

  background: #eee;

  border: 1px solid silver;

  display: none;

  padding: 0;

  position: absolute;

  left: 0;

  top: 100%;

  width: 180px;

}

.snm-menu ul li { float: none; }

.snm-menu ul li:hover { background: #ddd; }

.snm-menu ul li:hover a { color: black; }

.snm-menu ul a { color: black; }

.snm-menu ul ul { left: 100%; top: 0; }

.snm-menu ul ul li {float:left; margin-right:10px;}

.multi-menu-bar {

  background: #0c4da2;

  width: 100%;

  display: inline-block;

}

.multi-menu { padding: 0; margin: 0; }

.multi-menu li { float: left; list-style:none; }

.multi-menu>li:hover { background: white; position: relative; }

.multi-menu>li:hover a { color: black; }

.multi-menu a {

  text-decoration: none;

  display: block;

  padding: 10px 20px;

  color: white;

}

.multi-menu div {

  background: white;

  border-radius: 0 0 4px 4px;

  box-shadow: 0 3px 6px #ccc;

  display: table;

  position: absolute;

  left: 0;

  top: 100%;

  padding: 0;

  margin: 0;

  min-width: 150px;

}

.multi-menu div a { color: black; padding: 5px 10px; }

.multi-menu ul {

  padding: 0;

  margin: 0;

  display: table-cell;

}

.multi-menu div li {

  color: #000;

  float: none;

  padding: 3px 10px;

}

.multi-menu div li:hover { background: #eee; }

.multi-menu div li:hover a { color: black; }

.multi-menu div ul:not(:first-child) { border-left: 1px solid silver; }

.multi-menu .dropdown-header {

  padding: 3px 20px;

  font-size: 12px;

  color: #999 !important;

  background: white !important;

}

.multi-menu .divider {

  height: 1px;

  margin: 4px 2px;

  padding: 0;

  background: #ddd !important;

}

</style>

  

<script>

$(function(){

  $(".snm-menu li").hover(function(){

      $('ul:first',this).show();

  }, function(){

      $('ul:first',this).hide();

  });

 

  $(".snm-menu>li:has(ul)>a").each( function() {

      $(this).html( $(this).html()+' &or;' );

  });

 

  $(".snm-menu ul li:has(ul)")

    .find("a:first")

    .append("<p style='float:right;margin:-3px'>&#9656;</p>");

  

  

  $(".multi-menu>li:has(ul)>a").each( function() {

    $(this).html( $(this).html()+' &or;' );

  });

 

  $(".multi-menu li").hover(function(){

    $('div',this).show();

  }, function(){

    $('div',this).hide();

  });

});

</script>

</head>

<body>

<div class='snm-menu-bar'>

  <ul class="snm-menu">

    <li><a href="#">Service Name</a></li>

    <li><a href="#">1번 메뉴</a></li>

    <li><a href="#">2번 메뉴</a>

      <ul>

        <li><a href="#">2-A 메뉴</a></li>

        <li><a href="#">2-B 메뉴</a>

          <ul>

            <li><a href="#">2-B-1 메뉴</a></li>

            <li><a href="#">2-B-2 메뉴</a></li>

          </ul>

        </li>

        <li><a href="#">2-C 메뉴</a></li>

        <li><a href="#">2-D 메뉴</a>

          <ul>

            <li><a href="#">2-D-1 메뉴</a></li>

            <li><a href="#">2-D-2 메뉴</a></li>

            <li><a href="#">2-D-3 메뉴</a></li>

          </ul>

        </li>

      </ul>

    </li>

    <li><a href="#">3번 메뉴</a>

      <ul>

        <li><a href="#">3-A 메뉴</a></li>

        <li><a href="#">3-B 메뉴</a></li>

      </ul>

    </li> 

    <li><a href="#">4번 메뉴</a></li> 

  </ul>

</div>

<div class='multi-menu-bar'>

  <ul class="multi-menu">

    <li><a href="#">홈</a></li>

    <li><a href="#">1번 메뉴</a></li>

    <li><a href="#">2번 메뉴</a>

      <div style='width:300px;'>

        <ul>

          <li class='dropdown-header'>헤더 2A</li>

          <li><a href="#">2A-1 메뉴</a></li>

          <li><a href="#">2A-2 메뉴</a></li>

          <li><a href="#">2A-3 메뉴</a></li>

          <li><a href="#">2A-4 메뉴</a></li>

        </ul>

        <ul>

          <li><a href="#">2B-1 메뉴</a></li>

          <li><a href="#">2B-2 메뉴</a></li>

          <li class="divider"></li>

          <li class='dropdown-header'>헤더 2B</li>

          <li><a href="#">2B-3 메뉴</a></li>

        </ul>

      </div>

    </li>

    <li><a href="#">3번 메뉴</a>

      <div>

        <ul>

          <li><a href="#">3-1 메뉴</a></li>

          <li class="divider"></li>

          <li><a href="#">3-2 메뉴</a></li>

          <li><a href="#">3-3 메뉴</a></li>

        </ul>

      </div>

    </li>

    <li><a href="#">4번 메뉴</a></li>

  </ul>

</div>

<iframe id="autoIframe" src="http://127.0.0.1:8080/hello/inpage" width="100%" height="100%" style="background-color:#cccccc;border:0px solid gray;"></iframe>

    

</body>

</html>