[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を「動的に1行追加」「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;
}
}