28293


HTML5とThymeleafを使用しています。

[code]

    <tr>
        <th>大タイトル</th>
        <th>中だいとる</th>
        <th:block th:each="title, stat: ${titleList}">
            <th>小タイトル<a class="title-icon" xxxx><span class=アイコンを表示></span></a></th>※
        </th:block>
    </tr>
    
[/code]

上記のように th:each で小タイトルをtitleList分表示しており  
小タイトルの横にはアイコンを表示し、アイコンをクリックするとダイアログが表示されるようにしています。

ここで、小タイトルを「小タイトル1」、「小タイトル2」…と表示したく、  
※箇所を下記のように変更してみたのですが、

[code]

    <th th:text="'小タイトル' + ${stat.count}"><a class="title-icon" xxxx><span class=アイコンを表示></span></a></th>
    
[/code]

確かに小タイトルに番号は振られるようになったのですが、

[code]

    <a class="title-icon" xxxx><span class=アイコンを表示></span></a>
    
[/code]

で表示されていたアイコンが表示されなくなってしまいました。

変更箇所は以下のみなのですが、何がおかしいのかがわかりません…。  
アドバイスを頂けると助かります。

[code]

    <th>小タイトル
    ↓
    <th th:text="'小タイトル' + ${stat.count}">
    
[/code]


CC BY-SA 3.0
2016-08-15T07:23:33.007
28278
2016-08-15T23:56:33.733
2016-08-15T23:56:33.733
12842
12842
question
html5 thymeleaf
<th>タグのテキスト表示と<a>タグについて


`th:text` 属性を指定した場合、その要素の中身は全てそのテキストで置き換えられます。入れ子になっている要素、ここでは `<a
class="title-icon" ...>` も含めて、です。  
仮に子要素を残すとしたら、テキストを挿入するのが子要素の前なのか後ろなのか、あるいは間なのかわからないですし。

※以下、Thymeleafのチュートリアルを参考に書いていますが、実際に試してはいません。

ひとつの方法は、置き換えたいテキストだけを含んだ要素を作る方法です。`<span>`
などのHTMLタグを使ってもいいですが、生成されたHTMLではやっぱりべたなテキストにしたいということであれば、
[`<th:block>`](http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf_ja.html#%E6%93%AC%E4%BC%BC%E7%9A%84%E3%81%AA-
thblock-%E3%82%BF%E3%82%B0) というタグを使います。

[code]

    <th><th:block th:text="'質問' + ${stat.count}" /><a class="title-icon" xxxx><span class=アイコンを表示></span></a></th>
    
[/code]

もしくは、[インライン記法](http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf_ja.html#%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E5%87%A6%E7%90%86)が使えそうです。この場合親要素に
`th:inline` 属性を指定しておき、属性ではなくテキスト中に `[[ ]]` で囲んだ式を書きます。

[code]

    <th th:inline="text">質問 [[${stat.count}]]<a class="title-icon" xxxx><span class=アイコンを表示></span></a></th>
    
[/code]

* * *

これまでの質問でも気になったのですが、Thymeleafを通して出力されたHTMLが期待と異なるというのと、HTMLの表示結果が期待したものと違う、というのは分けて考えるべきです。

表示が期待通りにならないとき、まずはブラウザのソース表示機能や開発者ツールでHTMLを見てみて、期待したものになっているかどうかを確認します。HTMLは合っているのに意図した表示にならないというのはHTML（やCSS）の問題ですし、今回のようにHTMLがおかしいというのはThymeleafのテンプレートの記述が間違っているということです。

そのためにも、Thymeleafの記法や属性を使わずにHTMLだけで組んで表示結果を確認してから、そのHTMLを生成できるようにThymeleafでマークアップしていく、という手順を踏んだ方が確実です。


CC BY-SA 3.0
2016-08-15T17:45:56.203
28293
2016-08-15T17:54:02.677
2016-08-15T17:54:02.677
8000
8000
28278
answer