LoginSignup
0
0

More than 1 year has passed since last update.

@y-rari(ゆらり)

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

Posted at

[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;
    }
}
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0