前提・実現したいこと
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
回答2件
あなたの回答
tips
プレビュー