跳到主要內容

Table column move using jQuery

一個好朋友問到,怎麼讓表格的欄位透過按上或按下的箭頭來上下移動
下面是臨時趕出來的範例
觀念是使用jQuery的Manipulation與Selection來作<tr>的移動
條件是<tr>上都要有id的屬性設定喔
如果用的tablib無法在tr上加設屬性的話
可以換成用class的方式做Selection....我就不多說啦~ :D

範例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/ui.core.js"></script>
    <script type="text/javascript">   
        $(function() {       
            $('#show').click(function(){
                alert($('body').html());
            });
           
        });   

        function mvdown(id){
            if($('#' + id).next().attr('id')){
                var v = '<tr id='+id+'>' + $('#' + id).html() + '</tr>';
                var p = $('#' + id).next();
                $('#' + id).remove();
                p.after(v);
            }
        }

        function mvup(id){
            if($('#' + id).prev().attr('id')){
                var v = '<tr id='+id+'>' + $('#' + id).html() + '</tr>';
                var p = $('#' + id).prev();
                $('#' + id).remove();
                p.before(v);
            }
        }
    </script>
</head>
<body>   

<table id = "tb" border="1" style="width:100%">
<tr id ="tr1" name="ttt">
<td>111</td><td>11111111111111</td><td><input type="button" value="down" onclick="mvdown('tr1')"/><input type="button" value="up" onclick="mvup('tr1')"/></td>
</tr>
<tr id ="tr2" name="ttt">
<td>222</td><td>22222222222222</td><td><input type="button" value="down" onclick="mvdown('tr2')"/><input type="button" value="up" onclick="mvup('tr2')"/></td>
</tr>
<tr id ="tr3" name="ttt">
<td>333</td><td>33333333333333</td><td><input type="button" value="down" onclick="mvdown('tr3')"/><input type="button" value="up" onclick="mvup('tr3')"/></td>
</tr>
<tr id ="tr4" name="ttt">
<td>444</td><td>44444444444444</td><td><input type="button" value="down" onclick="mvdown('tr4')"/><input type="button" value="up" onclick="mvup('tr4')"/></td>
</tr>
</table>

<input id="show" type="button" value="Show HTML" />
</body>
</html>

這個網誌中的熱門文章

Oracle LISTAGG

同事介紹的一個Oracle的好用查詢:LISTAGG
SELECT A.GROUP_ID,A.KEY, LISTAGG(A.VALUE,'; ')WITHINGROUP(ORDERBYA.VALUE)as GG  fromSYS_PROPERTIESaGROUP byA.GROUP_ID,A.KEY
LISTAGG可以將group後的結果會總顯示於一個欄位 上述SQL原本A.VALUE會是一個row一個row的排列 使用LISTAGG之後,可以將A.VALUE顯示在同一個row中 並且可以指定間隔符號(在此設定為';') 針對某一些報表查詢非常有用唷 :D

使用GCP Cloud Builder建置CI/CD Flow

服務的建置通常是持續性的作業,而部署則一般是專案初期建置一次,未來可以沿用該部署設定... 這樣的流程走向自動化,在Container的環境又更是重要... 本篇介紹一下,在Google雲端,我們可以搭配Source Repository與Build Trigger等服務來完成服務的自動建置與部屬,讓封裝Container與部署到Container Engine的動作可以一氣呵成...
首先幾單瞭解一下一個Container Engine服務的建置與部屬過程...
使先,建立Container Engine Cluster,透過GCP Winzard可以很快速地開立您的GKE Cluster…

假設您的cluster是叫做demo-cluster,則可以透過下面的指令來跟GKE建立連線
$ gcloud container clusters get-credentials demo-cluster --zone asia-east1-a
這串指令不用記ㄛ~可以在Cluster的頁面找到他...

點選複製,即可貼到您的Terminal執行...

跟GKE建立鏈結後,接下來可以部署您的城市,這邊我們以我的一個範例程式Demoweb (https://github.com/peihsinsu/demoweb) 為例,

這個專案中,包含幾個重要結構:
app/ : 放置您的程式,在Dockerfile中會將該資料匣複製到Docker Image中 k8s/ : 放置k8s的deployment與service描述檔 Dockerfile : 封裝docker的描述檔,會以node.js的image為基礎來建置執行環境 cloudbuild.yaml : Google Cloud Build Trigger的步驟描述檔

使用 minikube 輕鬆上手 kubernetes

安裝minikube
macOS只需要透過brew即可快速安裝...
brew cask install minikube
Linux環境可以直接下載執行檔,放到環境變數可以吃到的路徑即可...
curl -Lo minikube https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64 && \ chmod +x minikube && \
sudo mv minikube /usr/local/bin/
Windows的下載網址如下: https://storage.googleapis.com/minikube/releases/latest/minikube-windows-amd64.exe
如果您的kubectl尚未安裝,可以直接使用google cloud sdk來安裝:
curl https://sdk.cloud.google.com | bash
gcloud components install kubectl
安裝完成後,原則上minikube會在本地端加入minikube的k8s context,我們可以透過下面指令來使用該context…
kubectl config use-context minikube
然後,可檢查一下您的minikube node是否正常運作....