html(laravelのblade)のloop内テーブル全<td>でjavascriptイベントを発生させたい

Question

今、htmlのテーブル<table>の中で、
laravel、controllerから持ってきた数値を<td>内に表示させているのですが
その際に数値がカンマ区切りになるようにjavascriptで設定しています。

ですが、そのカンマ区切りが反映されるのはテーブルの１行目のみで、
２行目以降は反映されません。
どこが悪いのか
ご指摘いただけますと幸いです。
宜しくお願いいたします。

今の状態↓

laravelのblade画面で一覧表示ページを持ってきたときに
カンマ区切りで表示されるようにしたいです。写真の60000000は{{$date->goal}}の値です

(途中省略）
            <tbody>
                @foreach ($getData as $data)
                    <tr> 
                        <td id = "goal">{{$data->goal}}</td> ←写真の60000000の値
                        <td id = "result">{{$data->result}}</td>　　
                    </tr>
                @endforeach
            </tbody>
        <table>
</div>
<script>
window.onload = function(){
// ページ読み込み時に実行したい処理

  var goal = {{$data->goal}};
  var result = {{$data->result}};
  var retGoal = Number(goal).toLocaleString();
  var retResult = Number(result).toLocaleString();
  document.getElementById("goal").innerHTML  = retGoal; 
  document.getElementById("result").innerHTML  = retResult; 

Answer 1

IDが重複してはいけません。

この場合だったら、PHP側で処理した方が楽そうですが、JavaScriptでやるなら、処理したいtdに同じclassを指定してください。それをJSでループして既存の処理を行えば、実現可能です。

Comments

[rinkoro]

たしかにPHP側でやった方が楽だったのでそちらにしました^^;ありがとうございました！

Answer 2

PHP側でやったほうが楽でしたのでそちらで実装しました。

$getData = DB::select(DB::raw('select format(goal,0) as goal,format(result,0) as result from table'));

これをbladeに渡して３桁区切りで表示させました。

Comments

[kyoya0819]

こっちの方が簡単かな？という方法はっておきます。
```PHP
number_format($data->goal)
```
とくに、Controller側は何も変えず、Viewの、3桁区切りにしたいところを上記のように変えればできるはずです。

参考：https://www.php.net/manual/ja/function.number-format.php

書き直すとするとこんな感じか。
```Blade
(途中省略）
<tbody>
@foreach ($getData as $data)
<tr>
<td id = "goal">{{ number_format($data->goal) }}</td> ←写真の60000000の値
<td id = "result">{{$data->result}}</td>　　
</tr>
@endforeach
</tbody>
<table>
</div>
```

[rinkoro]

こちらで試してみたらあっさりできました！！ご親切、ご丁寧にわざわざありがとうございました！！＞＜
助かりました＾＾！！