工数管理ツールを開発してみた

#やったこと

工数を管理するウェブアプリを開発しました。
言語：Java(Spring), JavaScript

手順
1. プロジェクトを作成（この際に、プロジェクトコードを登録する）
2. 1.で登録したプロジェクトコードを入力することで、追加/編集/閲覧したいプロジェクトに遷移
3. タスク追加（タスク名、工数、開始日、終了日、担当者名など）
4. タスク閲覧（担当者がある期間にどんなタスクをどれだけの工数で終えたのか、プロジェクトの担当者がそれぞれどれだけの工数を費やしているか、など）

#画面
プロジェクトコード入力画面
<img width="1440" alt="スクリーンショット 2020-05-30 13.53.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/95df7549-79bb-f306-03ae-f9f928af0f7b.png">

タスク追加（および修正）画面
<img width="1439" alt="スクリーンショット 2020-05-30 13.54.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/a17fabb4-d5b5-bfd9-a477-69a1b0b7379e.png">

タスク閲覧画面
<img width="767" alt="スクリーンショット 2020-05-30 13.53.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/119f561d-8806-013a-0c11-29e685f3e4be.png">

#詰まったこと
##JavaScriptとThymeleafの連携？
[前回の記事](https://qiita.com/dumbbell/items/f7b5094c2b4769f94eb8)にも書きましたが、例えば、JavaScriptで

```JavaScript
target.html('<a th:href="@{/hello}">サンプル</a>');
```

と書いても、aタグが機能しなかったりしました。

###解決策

```html
<script type="text/javascript" th:inline="javascript">
    const link = /*[[@{/hello}]]*/'';
    target.html('<a href="' + link + '">サンプル</a>');
</script>
```

と書いてあげることで解決しました。
このように、JavaScriptでThymeleafの```th:```が使えない、といったことに苦戦しました。

##```table```タグ内に```form```タグを書けない問題
例えば、

```html
<table>
    <tr>
        <th>#</th>
        <th>名前</th>
        <th>ボタン</th>
    </tr>
    <tr>
        <form>
            <td>1</td>
            <td><input type="text"/></td>
            <td><input type="submit"></td>
        </form>
    </tr>
    <tr>
        <form>
            <td>2</td>
            <td><input type="text" /></td>
            <td><input type="submit"></td>
        </form>
    </tr>
</table>
```

画像だと、
<img width="222" alt="スクリーンショット 2020-05-30 14.21.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/1094802f-aa4e-2c86-4509-102f93123364.png">

こんなケースです。これをChromeのディベロッパーツールで見てみると、、、
<img width="229" alt="スクリーンショット 2020-05-30 14.27.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/fd4e8be6-ba63-be59-da33-4f4fd2d8b10a.png">

おかしい。。。```form```タグ、そこで閉じちゃダメ。。。

###解決策
1. ```form```タグにid属性を付与する
2. ```input```タグのform属性に1.で付与したidを記載する

こうすることで、```form```タグのidに対応した```input```のvalue値を送信することができます。
ちなみに、```form```タグは```input```タグの上でも下でもどこでも記載して良いそうです。

上の例だと

```html
<table>
    <tr>
        <th>#</th>
        <th>名前</th>
        <th>ボタン</th>
    </tr>
    <tr>
        <form id="form_01"></form>
        <td>1</td>
        <td><input type="text" form="form_01" /></td>
        <td><input type="submit" form="form_01"></td>
    </tr>
    <tr>
        <form id="form_02"></form>
        <td>2</td>
        <td><input type="text" form="form_02" /></td>
        <td><input type="submit" form="form_02"></td>
    </tr>
</table>
```

ディベロッパーツールで見ると

<img width="308" alt="スクリーンショット 2020-05-30 14.32.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577071/1c12b024-3e1a-57d9-9378-7ddc2f77a9ed.png">

このようになっているはずです！おそらくこれでうまくいきます。

以上です。最後まで読んでくださりありがとうございました。

#参考
[formタグは入れ子にできない＆その対処法](https://qiita.com/k5trismegistus/items/eda92664037f96f40e37)
[HTML5 FORMとINPUTを分けて記述する方法
](https://www.blog.umentu.work/html5-form%E3%81%A8input%E3%82%92%E5%88%86%E3%81%91%E3%81%A6%E8%A8%98%E8%BF%B0%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/)