質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

2回答

2342閲覧

javascriptで動的にテーブルを作成したい

takahiro00

総合スコア84

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2018/12/07 09:40

前提・実現したいこと

javaのcontrolelrからjavascriptにデータを渡して、動的にtableを生成したいのですが、
javascriptでtableの行を生成するfor文の部分で無限ループになってしまい、上手くいきません
おそらくfor文のtbody.rows.lengthの部分がおかしいと思うのですが
ご教授いただければと思います。

該当のソースコード

javascript

1/** 2 * 基本給登録ページ 3 */ 4function monthsSelect(obj){ 5 var objVar = obj.value; 6 $.ajax({ 7 type : "GET", 8 url : "baseSalaryMonth", 9 data: { 10 baseSalaryMonthStr: objVar 11 }, 12 dataType : "json" 13 }) 14 .then( 15 function (data) { 16 //tableの生成 17 var tbody = document.getElementById('table'); 18 var row = document.createElement("tr");//trを生成 19 var thId = document.createElement("th");//thを生成 20 var thNm = document.createElement("th");//thを生成 21 var thBa = document.createElement("th");//thを生成 22 //ユーザIDヘッダ 23 thId.id="userId"; 24 thId.innerHTML="ユーザID"; 25 row.appendChild(thId); 26 //ユーザ名ヘッダ 27 thNm.id="fullNm"; 28 thNm.innerHTML="ユーザ名"; 29 row.appendChild(thNm); 30 //基本給ヘッダ 31 thBa.id="baseSalary"; 32 thBa.innerHTML="基本給"; 33 row.appendChild(thBa); 34 tbody.append(row); 35 for (i = 0; i < tbody.rows.length; i++){ 36 var tr = document.createElement("tr"); 37 //列(td)用のループ 38 for (j = 0; j < 5; j++){ 39 //tdエレメントをを生成 40 var td = document.createElement("td"); 41 td.innerHTML = 'こんにちは' + j; 42 tbody.appendChild(td); 43 } 44 tbody.append(tr); 45 } 46 }, 47 function () { 48 //通信失敗 49 alert("読み込み失敗"); 50 }); 51}

java

1 @RequestMapping(value = "/baseSalaryMonth" , method = RequestMethod.GET) 2 @ResponseBody 3 public List<BaseSalary> baseSalarySelectMonth(String baseSalaryMonthStr, ModelAndView mav)throws JsonParseException, JsonMappingException, IOException{ 4 System.out.println(baseSalaryMonthStr); 5 int aseSalaryMonth = Integer.parseInt(baseSalaryMonthStr); 6 List<BaseSalary> baseSalaryList = baseSalaryService.baseSalary(aseSalaryMonth); 7 return baseSalaryList; 8 }

html

1<!DOCTYPE html> 2<html lang="ja" xmlns:th="http://www.thymeleaf.org" 3 xmlns:sec="http://www.thymeleaf.org/extras/spring-security4"> 4<head> 5<meta charset="UTF-8"> 6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 7<script src="/js/sampleJs.js" th:src="@{/js/baseSalary.js}"></script> 8</head> 9<body> 10<h1>基本給登録ページ</h1> 11 <form method="post" th:action="@{/base_salary_upd}"> 12 <select id="getMonthsSelect" name="getMonthsSelect" onChange="monthsSelect(this)"> 13 <option th:each="item : ${getMonthsSelect}" 14 th:value="${item.key}" 15 th:text="${item.value}">singleSelect</option> 16 </select><br> 17 </form> 18 <table id="table"></table> 19</body> 20</html>

補足情報(FW/ツールのバージョンなど)

java8
SpringBoot2.0
jquery1.9.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2018/12/07 09:56

javaは具体的にはどういうjsonを返しているのでしょうか?
takahiro00

2018/12/07 10:07

javaはlist型のデータを返しています。
takahiro00

2018/12/07 10:08

tableに書き込む内容は一旦、こんにちわにしています。とりあえずデータの数だけ「こんにちわ」が表示できればと思っております。
yambejp

2018/12/07 10:14

javaはlist型のデータを返しています。 ・・・いや、jsでdataTypeをjsonにしているのでエラーでない限りjsonデータを返してくれているのはわかっているのですが、具体的なデータがないと検証できないといいたいだけです。サンプルが提示できないならこれ以上の回答は望めないと思ったほうがよいでしょう
guest

回答2

0

JavaScript

1for (i = 0; i < tbody.rows.length; i++){ 2}

無限ループになって困っているそうですが、
この書き方はtbody.rows.lengthがInfinifyでなければ確実に終了する極めてセーフティな書き方です。
であれば、全体的にDOM作る箇所、レンダリング周りが愚鈍でCPU使用率が100%振り切って応答しなくなってるだけでしょう。

ブラウザのテーブルはデフォルトでtable-layout: auto;というCSSが効いており、
テーブルの中身に従って各カラムの横幅が自動調整になるようです。
数十行ならまだ何とかなるでしょうけど、100を超えると最新のブラウザでも悲鳴を上げる事態になりそうです。

一度<table style="table-layout: fixed;">を指定してみてください。
横幅の自動調整がなくなるので各横幅はきちんと定義する事になりますが、レンダリングが格段に速くなるはずです。

また、DOMを1個ずつ掴んで挿入というのもコストがでかいので、
var tmp += "<tr><td>value1</td><td>value2</td>...</tr>";みたいな感じで文字列でくっつけまくって、最終的にtable.innerHTML = tmp;等として一撃でぶちこんでレンダリングの手間を最小にしてあげるとパフォーマンス的に許容範囲に収まるんじゃないかと思います。

投稿2018/12/07 10:10

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takahiro00

2018/12/07 11:24

ご回答ありがとうございます。 tbody.rows.lengthによる無限ループではなかったのですね
guest

0

ベストアンサー

とりあえず

javascript

1function monthsSelect(obj){ 2 var objVar = obj.value; 3 $.ajax({ 4 type : "GET", 5 url : "baseSalaryMonth", 6 data: { 7 baseSalaryMonthStr: objVar 8 }, 9 dataType : "text" 10 }).done(function (data) { 11 console.log(data); 12 }).fail(function(xhr,err){ 13 console.log(err); 14 }); 15}

で、受け取ったdataを提示して下さい。まずはそこから

ajax

javascript

1<script> 2function monthsSelect(obj){ 3 var objVar = obj.value; 4 $.ajax({ 5 "type" : "GET", 6 "url" : "baseSalaryMonth", 7 "data" : {baseSalaryMonthStr: objVar}, 8 "dataType" : "json", 9 }).done(function(data){ 10 $('#t1').append($('<thead>')).append($('<tbody>')); 11 $('<tr>') 12 .append($('<th>').attr('id','userId').text('ユーザID')) 13 .append($('<th>').attr('id','fullNm').text('ユーザ名')) 14 .append($('<th>').attr('id','baseSalary').text('基本給')) 15 .appendTo($('#t1 thead')); 16 data.forEach(function(x){ 17 $('<tr>') 18 .append($('<td>').text(x.userId)) 19 .append($('<td>').text(x.fullNm)) 20 .append($('<td>').text(x.baseSalary)) 21 .appendTo($('#t1 tbody')); 22 }); 23 }); 24}; 25</script> 26<table id="t1"></table>

投稿2018/12/07 10:16

編集2018/12/07 11:10
yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takahiro00

2018/12/07 10:36

はい 受け取った値は以下になります。 [{"userId":2,"fullNm":"鈴木一郎","baseSalary":0,"yearDay":0},{"userId":4,"fullNm":"pppp","baseSalary":0,"yearDay":0},{"userId":3,"fullNm":"oooo","baseSalary":0,"yearDay":0}]
yambejp

2018/12/07 11:11

ご提示のjsonデータをうけとるのであればajaxサンプルの通り処理すればよいでしょう
takahiro00

2018/12/07 11:23

おーできました ありがとうございます。 入れ方がそもそも違いましたね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問