JSPでPostgreSQLから取ってきたデータの型によってCSSを変えたい

前提・実現したいこと

ほぼタイトル通りですが、以下のJSPでとってきたPostgreSQLのデータを
出力する際今現在は、以下の画像(今回の対象は89期上期数以下全ての項目になります)
のようになっていますがこれを
"-"(String型)で返ってきた時はtext-align:center;で真ん中表示
"数値"(Integer型)で返ってきた時は同上のlight指定で右寄せ
といった感じにしたいと考えています。
また、タグにJSを貼っていますがJSPとcssだけで実現できるのであれば
外しておきます。

JSPの値をJavaScriptに渡す方法を模索してみましたが
参考にできるソースが皆無だったためサンプルソースも
一緒に添えてあげて頂けると幸いです。

該当のソースコード

少し長いですがこれでも不必要な部分は省略しているので勘弁下さい...。

要はソース後半部分の、コメント"取得した結果を出力する"以下の部分で
String型,Int型,Double型の3型確認できるかと思うのですが
そこで取得した値をJavaScriptに渡してそこからデータ型によって
cssを振り分けるといった流れをイメージしています。

JSP
1out.print("<tr>");
2			out.println("<th rowspan=3>89期</th>");
3			out.println("<td style=\"background: linear-gradient(#225588,#4477aa);text-align: center;font-size:15px;color:white;box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;\">上期数</td>");
4			out.print("<td style=\"text-align:right;\">" + nvl(rs.getInt("delivary_1st"),rs.wasNull(),"-") + "</td>");
5			out.println("</tr>");
6			
7			out.print("<tr>");
8			out.println("<td style=\"background: linear-gradient(#225588,#4477aa);text-align: center;font-size:15px;color:white;box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;\">下期数</td>");
9			out.print("<td style=\"text-align:right;\">" + nvl(rs.getInt("delivary_2nd"),rs.wasNull(),"-") + "</td>");
10			out.println("</tr>");
11			
12	//●●●out.print("<tr>");
13			out.println("<td style=\"background: linear-gradient(#225588,#4477aa);text-align: center;font-size:15px;color:white;box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;\">通期数</td>");
14			out.print("<td style=\"text-align:right;font-weight:bold;color:red;\">" + nvl(rs.getInt("delivary_total"),rs.wasNull(),"-") + "</td>");
15			out.println("</tr>");
16			
17			out.print("<tr>");
18			out.println("<th colspan=2>直近所要量(年換算)</th>");
19			out.print("<td style=\"text-align:right;\">" + nvl(rs.getInt("required"),rs.wasNull(),"-") + "</td>");
20			out.println("</tr>");
21			
22			out.print("<tr>");
23			out.println("<th colspan=2>87期実績数</th>");
24			out.print("<td style=\"text-align:right;\">" + nvl(rs.getInt("delivary_87"),rs.wasNull(),"-") + "</td>");
25			out.println("</tr>");
26			
27			out.print("<tr>");
28			out.println("<th colspan=2>88期実績数</th>");
29			out.print("<td style=\"text-align:right;\">" + nvl(rs.getInt("delivary_88"),rs.wasNull(),"-") + "</td>");
30			out.println("</tr>");
31			
32			out.print("<tr>");
33			out.println("<th colspan=2>87期購入金額</th>");
34			out.print("<td style=\"text-align:right;\">" + nvl(rs.getDouble("price_total_87"),rs.wasNull(),"-") + "</td>");
35			out.println("</tr>");
36			
37			out.print("<tr>");
38			out.println("<th colspan=2>88期購入金額</th>");
39			out.print("<td style=\"text-align:right;\">" + nvl(rs.getDouble("price_total_88"),rs.wasNull(),"-") + "</td>");
40			out.println("</tr>");
41			
42			out.print("<tr>");
43			out.println("<th colspan=2>89期購入金額</th>");
44			out.print("<td style=\"text-align:right;\">" + nvl(rs.getDouble("price_total_89"),rs.wasNull(),"-") + "</td>");
45			out.println("</tr>");
46			
47			out.print("<tr>");
48			out.println("<th colspan=2>直近金額</th>");
49			out.print("<td style=\"text-align:right;\">" + nvl(rs.getDouble("latest_price"),rs.wasNull(),"-") + "</td>");
50			out.println("</tr>");
51		}
52        out.println("</table>");
53

JSP
1
2<%@page import="java.util.*"%>
3<%@page import="java.sql.*"%>
4<%@page import="java.io.*"%>
5<%@page import="java.text.*"%>
6<%@page import="java.text.DecimalFormat"%>
7
8<%@ page language="java" contentType="text/html; charset=UTF-8"
9    pageEncoding="UTF-8"%>
10<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
11<html>
12<head>
13<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
14<link rel="stylesheet" type="text/css" href="/jsp/nichiei/max/css/detail-css.css">
15<title>詳細表示画面</title>
16</head>
17<body>
18
19<%!
20	private String nvl(String str0, String str1) {
21		if(str0 == null) { return str1; } else { return str0; }
22	}
23
24	private String nvl(Double val, boolean wn, String str) {
25		DecimalFormat df = new DecimalFormat("#,###,###,##0.00");
26		if(wn) { return str; } else { return df.format(val); }
27	}
28
29	private String nvl(int val, boolean wn, String str) {
30		DecimalFormat df = new DecimalFormat("##,###,##0");
31		if(wn) { return str; } else { return df.format(val); }
32	}
33%>
34
35<%
36	//変数定義
37	Connection conn = null;
38	PreparedStatement ps = null;
39	ResultSet rs = null;
40	String HOME = (System.getenv("NICHIEI_JSP_HOME"));
41	
42	try {
43		
44		Properties properties = new Properties();
45		InputStream istream = new FileInputStream(HOME + "/max/dbinfo.properties");
46		properties.load(istream);
47		
48		String dbURL = properties.getProperty("dbURL");
49		String user = properties.getProperty("user");
50		String pass = properties.getProperty("pass");
51		String key = "%";
52		
53
54		if(request.getParameter("key") != null) {
55			if(request.getParameter("key") != "") {
56				key = "%" + request.getParameter("key") + "%";
57			}
58		}
59		
60		conn = DriverManager.getConnection(dbURL, user, pass);
61
62		
63		String sql = "SELECT * from max_jikeisu89 WHERE part_code ILIKE ? or process1 ILIKE ?";
64
65		ps = conn.prepareStatement(sql);
66		key = key.replace("*", "%");
67		ps.setString(1, key);
68		ps.setString(2, key);
69
70		//ログ出力
71		Timestamp timestamp = new Timestamp(System.currentTimeMillis());
72		SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd hh:mm:ss");
73		String stamp = sdf.format(timestamp);
74		System.out.println(stamp + " max/get_detail_info.jsp: key = " + key);
75
76        //SELECTを実行する
77        rs = ps.executeQuery();
78        
79        //テーブル出力
80        DecimalFormat df = new DecimalFormat("##,###,##0");
81        DecimalFormat df2 = new DecimalFormat("#,###,###,##0.00");
82		
83        //取得した結果を出力する
84        out.println("<table border=\"1\" align=\"center\">");
85        while(rs.next()){
86    //●●●out.print("<tr>");
87			out.println("<th colspan=2>品目コード</th>");
88			out.print("<td style=\"font-weight:bold;text-align:center;font-size:20px;color:red;\">" + nvl(rs.getString("part_code"),"-") + "</td>");
89			out.println("</tr>");		
90		
91			out.print("<tr>");
92			out.println("<th colspan=2>見積LOT</th>");
93			out.print("<td style=\"text-align:right;\">" + nvl(rs.getInt("lot"),rs.wasNull(),"-") + "</td>");
94			out.println("</tr>");
95			
96			out.print("<tr>");
97			out.println("<th colspan=2>荷姿</th>");
98			out.print("<td style=\"text-align:right;\">" + nvl(rs.getInt("packing"),rs.wasNull(),"-") + "</td>");
99			out.println("</tr>");
100			
101	//●●●out.print("<tr>");
102			out.println("<th colspan=2>購入単価</th>");
103			out.print("<td style=\"text-align:right;font-weight:bold;color:red;\">" + nvl(rs.getDouble("price"),rs.wasNull(),"-") + "</td>");
104			out.println("</tr>");
105			
106			out.print("<tr>");
107			out.println("<th colspan=2>材料費</th>");
108			out.print("<td style=\"text-align:right;\">" + nvl(rs.getDouble("material_cost"),rs.wasNull(),"-") + "</td>");
109			out.println("</tr>");
110		}
111        out.println("</table>");
112
113	} catch (SQLException ex) {
114		ex.printStackTrace();
115	} finally {
116		try {
117			if (conn != null && !conn.isClosed()) {
118				conn.close();
119			}
120		} catch (SQLException ex) {
121			ex.printStackTrace();
122		}
123	}
124%>
125</body>
126</html>
127
128

行動規範の内容に同意します

回答1件

rs.getInt や、 rs.getString をしている行によって表示するCSSのStyleが変わるのですから、一番簡単な方法は、文字列や数値を表示する行にあわせて CSSのクラスを設定するだけで良いでしょう。

投稿2019/04/26 09:54

A-pZ

総合スコア12011

kitten

2019/04/26 23:39

コメントありがとうございます。すみません。私の説明不足だったかもしれません。 A-pZさんが仰っているのは恐らく以下の様に out.print("<td style=\"text-align:right;\">" + nvl(rs.getInt("delivary_1st"),rs.wasNull(),"-") + "out.print("<td style=\"text-align:right;\">" + nvl(rs.getInt("delivary_1st"),rs.wasNull(),"-") + "</td>"); out.print("<td style=\"text-align:center;\">" + nvl(rs.getInt("delivary_1st"),rs.wasNull(),"-") + "</td>"); out.print("<td style=\"text-align:left;\">" + nvl(rs.getInt("delivary_1st"),rs.wasNull(),"-") + "</td>"); のようなことでしょうか。私はそう解釈したのですが間違っていたらすみません。仮にそうだとしたら、最初に載せたソース(上から2番目の方)の上の方で作ったAPIで Nullの判定などをしており、出力時にもし判定がNullであれば文字"-"が返りそうでなければ数値が返るようになっています。今回私が実現したいのは、Null(つまりDBに値がなかった時)の時に返ってくる"-"を text-align:center;とし値が返ってきた場合をrightとしたいのです。

kitten

2019/04/26 23:42

また、順序が変になりましたが一番上に前回省略分の画面出力部分のソースを載せておきました。

行動規範の内容に同意します