テーブル作成 + Ajax(json) + Java(Spring Boot)

### [table.html]
````
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
 	<!--<script type="text/javascript" src=@{/js/table.js}></script>-->
 	<!--　@{/js/各自の名前.js}の部分は\src\main\resources\static以下にファイルを置いた際のパスです。-->
	<!--<script th:src="@{/js/table.js}" type="text/javascript" ></script>-->
	<!--<script src="/js/table.js"></script>-->
 	<link rel="stylesheet" href="/css/table.css">
    

    <title>Table_Practice</title>
</head>
  <body>
  <!--
  	<h1>Tableを「動的に１行追加」「jQuery Ajax通信し、結果を表示する」</h1></br>
  	<h3>「json文字列で、やりとりする」</h3></br></br>
  -->
  
      <div>
          <button id="addrow">ADD</button>
          <button id="search">SEARCH</button>
          <button id="insert">INSERT</button>
      </div>
      <table border="1" id="tbl">
          <tbody>
              <tr name="oneRow[]">
                  <td name="col1">test1</td>
                  <td name="col2">test2</td>
                  <td colspan="2" name='col3'>test3</td>
                  <td colspan="2" name="col4">test4</td>
                  <td colspan="2" name="col5"></td>
                  <td colspan="2" name="col6"></td>
                  <td colspan="2" name="col7"></td>
                  <td colspan="2" name="col8"></td>
              </tr>
              <tr name="oneRow[]">
                  <td name="col1">test1_</td>
                  <td name="col2">test2_</td>
                  <td colspan="2" name='col3'>test3_</td>
                  <td colspan="2" name="col4">test4_</td>
                  <td colspan="2" name="col5"></td>
                  <td colspan="2" name="col6"></td>
                  <td colspan="2" name="col7"></td>
                  <td colspan="2" name="col8"></td>
              </tr>
              <tr name="twoRow[]">
                  <td name="col1"></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
              </tr>
          </tbody>
      </table>

      <!--<table border>
          <tr>
              <td>1-1</td>
              <td>1-2</td>
              <td>1-3</td>
          </tr>
          <tr>
              <td>2-1</td>
              <td>2-2</td>
              <td>2-3</td>
          </tr>
      </table>-->



      <!--<div>
        <button onclick="addrow()">行追加</button>
        <button onclick="getdt">送信</button>
        <button onclick="getdt">取得</button>
    </div>
    <table border="1" id="tbl">
        <tr>
            <th>日付</th>
            <th>担当</th>
            <th>タスク</th>
        </tr>
    </table>-->
    
  <!--
    <script>
        $('#send').on('click', function () {
            alert('送信ボタンが押されたよ')
            addrow()
        })
        $('#search').on('click', function () {
            alert('検索ボタンが押されたよ')
        })
        $('#insert').on('click', function () {
            alert('登録ボタンが押されたよ')
        })

        function getdt() {
            console.log('getdt()')
        }

        function getJson() {
            let obj = {

            }

            return JSON.stringify(obj)
        }
    </script>
    -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="/js/table.js"></script>
  </body>
</html>

````


### [table.js]
````
(function(){
    console.log("js読み込み完了");
})();

//$('#search').click(function() {
//    console.log("クリック");
//})
$('#addrow').on('click', function() {
	addrow()
})

$('#search').on('click', function () {
	//alert("Search Button Click!")
	$('#tbl').find('[name="oneRow[]"]').each(function(index) {
		console.log('index='+index)
		console.log("col1="+$(this).find('td[name=col1]').text())
		console.log("col2="+$(this).find('td[name=col2]').text())
		console.log("col3="+$(this).find('td[name=col3]').text())
		console.log("col4="+$(this).find('td[name=col4]').text())
		console.log("col5="+$(this).find('td[name=col5]').text())
		console.log("col6="+$(this).find('td[name=col6]').text())
	})
	/*
	$.ajax({
		type: 'post',
		url: 'search',
		data: {
			'note': 'abcde'
		}
	}).done((data, textStatus, jqXHR) => {
		try {
			const json = JSON.parse(data)
			console.log('note=' + json.note)
		}  catch (error) {
			console.log(error)
		}
	}).fail((jqXHR, textStatus, errorThrown) => {
		console.log('ajax failed')
	});
	*/
})

function addrow() {

    //let tbl = document.getElementById('tbl');
    let tbl = $('#tbl')

    let name = ["name"];
    let todo = ["todo"];

    tbl.append(createOne())
    tbl.append(createTwo())
}

function createOne() {
    return $('<tr>')
        .append('<td>text!')
        .append('<td>')
        .append('<td colspan="2">')
        .append('<td colspan="2">')
        .append('<td colspan="2">')
        .append('<td colspan="2">')
        .append('<td colspan="2">')
        .append('<td colspan="2">')
}

function createTwo() {
    return $('<tr>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
        .append('<td>')
}

function createSelect(arr, tr, tbl) {

    //let sl = document.createElement('select');
    let sl = $('<select>')
    //let td = document.createElement('td');
    let td = $('<td>')
    for (let num in arr) {        
        //let op = document.createElement('option');
        let op = $('<option>')
        op.text = arr[num];
        //sl.appendChild(op);
        sl.append(op)
    }
    //td.appendChild(sl);
    td.append(sl)
    //sl.text == arr;
    //tr.appendChild(td);
    tr.append(td)

    tbl.append(tr)
}

//-----------------------------------------------------------------------
////function addrow() {

////  let tbl = document.getElementById('tbl');

////  let name=[""];
////  let todo=[""];

////  let tr = document.createElement('tr');
////  let datetd = document.createElement('td');
////  //let dateinp = document.createElement('input');

////  //dateinp.setAttribute('type','date');
////  //datetd.appendChild(dateinp);        
////  //tr.appendChild(datetd);               

////  createSelect(name,tr,tbl);
////  createSelect(todo,tr,tbl);
////  createSelect(todo,tr,tbl);
////  createSelect(todo,tr,tbl);
////  createSelect(todo,tr,tbl);
////  createSelect(todo,tr,tbl);
////  createSelect(todo,tr,tbl);
////  createSelect(todo,tr,tbl);

////    tbl.appendChild(tr);

////    //let name = [""];
////    //let todo = [""];

////    //let tr = document.createElement('tr');
////    //let datetd = document.createElement('td');
////    //let dateinp = document.createElement('input');

////    //dateinp.setAttribute('type', 'date');
////    //datetd.appendChild(dateinp);       
////    //tr.appendChild(datetd);

////    //createSelect(name, tr, tbl);
////    //createSelect(todo, tr, tbl);
////    //tbl.appendChild(tr);
////}

////function createSelect(arr,tr,tbl){

////  let sl = document.createElement('select');
////  let td = document.createElement('td');
////  for(let num in arr){       
////    let op = document.createElement('option');
////    op.text = arr[num];
////    sl.appendChild(op);
////  }
////  td.appendChild(sl);
////  tr.appendChild(td);

////}

//----------------------------------------------------------------------------------------------
//    function addrow() {

//        let tbl = document.getElementById('tbl');

//        let name = [""];
//        let todo = [""];

//        let tr = document.createElement('tr');
//        let datetd = document.createElement('td');
//        let dateinp = document.createElement('input');

//        dateinp.setAttribute('type', 'date');
//        datetd.appendChild(dateinp);        
//        tr.appendChild(datetd);

//        createSelect(name, tr, tbl);
//        createSelect(todo, tr, tbl);

//        tbl.appendChild(tr);

//    }

//    function createSelect(arr, tr, tbl) {

//        let sl = document.createElement('select');
//        let td = document.createElement('td');
//        for (let num in arr) {        
//            let op = document.createElement('option');
//            op.text = arr[num];
//            sl.appendChild(op);
//        }
//        td.appendChild(sl);
//        tr.appendChild(td);

//}
````


### [table.css]
````
div{
  margin-bottom:10px
  
}

/*table{
  border-collapse:collapse; 
}*/

/*
td{
  width:50px;
  height:20px;
}
*/

table#tbl td{
    width: 50px;
    height: 20px;
}

````


### [TableController.java]
````
package com.example.demo.table;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/table")
public class TableController {
    @GetMapping("/init")
    public String init() {
        return "table/table";
    }

    @PostMapping("/search")
    @ResponseBody
    public String note(@RequestParam String note) {
//    	String note = "aaa";
        String json = "{\"note\":\"" + note + note + "\"}";
        return json;
    }
}
````