2016-10-25 8 views
-2

私はthymeleafを使用しており、JavascriptまたはJqueryを使用してその値に基づいてテーブル行を移動したいと考えています。 値が "BAD"の場合、現在のテーブルからその行を削除し、その行を不良テーブルに移動します。私は<TD>がthymeleaf foreach:iterateを使って動的に挿入されているので、テーブルにクラスはありません。Thymeleaf HTMLテーブルの行を、その値に基づいて別のテーブルに移動するにはどうすればよいですか?

このすべてのオンロードは可能ですか?

Image to show

私は値「BAD」とし、別のテーブルに挿入を持っている最初の列を持つすべての行を複製し、削除しようとしましたが、私は最初の値を検索するスクリプトを書いてトラブルを抱えています。

Htmlの

<!DOCTYPE html> 
<html xmlns:th="http://www.thymeleaf.org"> 
<head lang="en"> 


    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <!--<meta http-equiv="refresh" content="1" />--> 


    <link href="../static/css/style.css" 
      th:href="@{css/style.css}" rel="stylesheet" type="text/css"/> 
</head> 
<body> 


<div class="container"> 
    <div class="jumbotron"> 
     <h3 style="color:yellow;"> 
BAD/WARNING 
</h3> 
<h3> 
APPLICATION PROCESSING MONITORING 
</h3> 
<table id="tablePmBad"> 
    <tr> 
     <th> Status </th> 
     <th> HostName </th> 
     <th> Process Name </th> 
     <th> Process Count </th> 
    </tr> 
    <tr> 
     <td> BAD </td> 
     <td> Host1 </td> 
     <td> process1</td> 
     <td> 0 </td> 
    </tr> 
</table> 


<h3 style="color:green;"> 
GREEN/NORMAL 
</h3> 
<h3> 
APPLICATION SERVER 
</h3> 
<table id="tablePmGreen"> 

<tr> 
     <th> Status </th> 
     <th> Host </th> 
     <th> Cpu Memory </th> 
     <th> App Memory </th> 
     <th> Opt Memory </th> 
    </tr> 
    <tr th:each="datamem", iterStat : ${datalist}"> 
     <td th: "${datamem.status}"></td> 
     <td th: "${datamem.host}"></td> 
     <td th: "${datamem.cpuMem}"></td> 
     <td th: "${datamem.appMem}"></td> 
     <td th: "${datamem.optMem}"></td> 

    </tr> 

</table> 


<h3> 
MONITORING 
</h3> 
<table id="tableMGreen"> 
    <tr> 
     <th> Status </th> 
     <th> HostName </th> 
     <th> Process Name </th> 
     <th> Process Count </th> 
    </tr> 

    <tr th:each="data, iterStat : ${countlist}"> 
     <td th: "${data.Status}"> </td> 
     <td th: "${data.host}"> </td> 
     <td th: "${data.pName}"></td> 
     <td th: "${data.pcount}"></td> 
    </tr> 
</table> 


<script src="../static/css/color.js" type="text/javascript" th:src="@{css/color.js}"></script> 

    </div> 

</div>  
</body> 
</html> 
+0

この質問は非常に曖昧です。いくつかのサンプルコードは素晴らしい追加です。それらのテーブルをどのように生成しますか?あなたのデータはどのように背中に形作られていますか? BAD/GOODフラグでデータを並べ替えるのは意味がありますか? – Nikolai

+0

私は良い/悪い私のデータを並べ替えたいですが、私はjavascriptやjqueryで行う方法がわかりません。 – Jesse

+0

元々、どのようにサーバー情報をすべて取得していますか?なぜクライアント側の代わりにすべてのサーバー側を並べ替えるのですか? – Adjit

答えて

0

それはあなたが行うような静的なテーブルを使用することをお勧めではありません。

私はいくつかのオプションを提案します。私の個人的な選択は、angularjsを使用し、ngRepeatディレクティブを使用してデータの配列を反復処理し、HTMLテーブルを生成することです。ここではあなたのための出発点だ:あなたはjqueryのを使用するように制約されている場合https://docs.angularjs.org/api/ng/directive/ngRepeat

別のオプションがあり、あなたは最初

あなたのデータをソートすることができ、ここでは良い例です:How to sort an array of objects with jquery or javascript

してからJavaScriptでそれを反復処理BADフラグに基づいて行を追加すると、次のようになります。

$("#table").append("<tr><td>"+blah+"</td></tr>"); 
+0

こんにちはNikolai、私はthymeleafを使用して、Javaからデータを取得しています。ループ内の各データについて、新しい行を作成しています。 – Jesse

+0

Ok :)これは今動作しますか? – Nikolai

+0

@ジャッキー、あなたはそのように見つけたら、答えをマークしてくれてうれしいですね。 – Nikolai

0

まず、HTMLの部分的なフォーマットが正しくありません。 複数の場所でIDを再利用することはできません。代わりにCLASSを使用してください。

<head>にこれらを追加します。

<link href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> 
<script src="//code.jquery.com/jquery-1.12.3.js" type="text/javascript"></script> 
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" type="text/javascript"></script> 

そして、これを最後に、</body>前:

<script> 
$(document).ready(function() { 
    $('table').DataTable({ 
    "order": [[0, "asc"]] 
    }); 
}); 
</script> 

さて、$('table').DataTableはすべて<table>が適切にフォーマットされ、最初の列でソートするように教えてくれます、上昇。

詳細については、DataTablesの使用方法について:visit this site

更新

私の悪い、オプションを抱いて} {追加するのを忘れ。 ここで完全なプランカテスト:https://plnkr.co/O1iedtYw4e8YpvlgPEcu

+0

自分のスクリプトに自分のスクリプトを追加しました。このスクリプトはheadタグ間のsrcリンクです。の前にスクリプト$(document)があります。しかし、何も起こらなかった。テーブルIDをクラスに変更する必要がありますか? – Jesse

+0

どうすれば自動的に行うことができますか? window.onloadのように。 ?ヘッダをクリックしなければならないのですか? – Jesse

+0

ページがロードされているときに' '

  • 11. 別のテーブルの2つの値に基づいてExcelテーブルを作成するにはどうすればいいですか
  • 12. SQLで特定の列を別のテーブルに移動するにはどうすればよいですか?
  • 13. Lightswitchでは、別のテーブルのレコードのデータに基づいてエンティティ/テーブルの計算フィールド/プロパティを作成するにはどうすればよいですか?
  • 14. SQLのあるテーブルから別のテーブルに行をコピーするにはどうすればよいですか?
  • 15. 同じ行の他の列の値に基づいてテーブルのすべての行の列を更新するにはどうすればよいですか?
  • 16. 次の要件に基づいてテーブルを作成するにはどうすればよいですか? [SQL]
  • 17. パラメータに基づいてfrom句のテーブル名を変更するにはどうすればよいですか?
  • 18. 特定の条件に基づいてテーブルを更新するにはどうすればよいですか?
  • 19. 別のテーブルのエントリに基づいてExcelテーブルを動的に展開する
  • 20. 複数のテーブルの値を別のテーブルに挿入するにはどうすればよいですか?
  • 21. セル値に基づいて1つのテーブルから別のテーブルに行をコピーするには
  • 22. 別のダイナミックドロップダウンの値に基づいてダイナミックドロップダウンを作成するにはどうすればよいですか?
  • 23. sql:テーブルから別のテーブルに値をコピーするにはどうすればよいですか?
  • 24. SQL - 別のテーブルの値に基づいて行を選択する方法は?
  • 25. htmlのenum値に基づいてテキストを設定するにはどうすればよいですか?
  • 26. テーブルのフィールドを別のテーブルの値に基づいて設定する方法
  • 27. テーブルの列を別のテーブルとの関係に基づいて更新するにはどうすればよいですか?
  • 28. フィールド値を別のフィールドに基づいてカウントするにはどうすればよいですか?
  • 29. 1つのテーブルのデータを別のテーブルに移動する条件に基づいて
  • 30. テーブルの行の値を特定の列に基づいて新しい列にプッシュするにはどうすればよいですか?