[javascript] jsonStringData → html table 구조로 print하기

search버튼 눌렀을 때 server response 밑에 나오는 table 구조의 customer 정보들

servlet에서 arrayList를 json으로 포맷 변환 후, response.(바로 직전 게시글 참조)

ajax로 호출 후 response 받은 jsonString data를 화면에 print

나머지 소스는 생략하고, javascript에서 print 해주는 부분만 발췌!

------------------------------------------------------------------

function crateTableRow(row, data, cellType) {
   var cell = document.createElement(cellType);
  var textNode = document.createTextNode(data);
  cell.appendChild(textNode); row.appendChild(cell);
}


function createTableData(row, data) {
  crateTableRow(row, data, "td");
}

function createTableHeader(row, data) {
  crateTableRow(row, data, "th");
}

function displayJSON(jsonString) {
  var json = JSON.parse(jsonString); //servlet에서 넘겨준 jsonString 값을 json으로 parsing
  var table = document.createElement("table");

  var thead = document.createElement("thead");
  table.appendChild(thead);
  var row = document.createElement("tr");
  createTableHeader(row,"Name");
  createTableHeader(row,"Age");
  createTableHeader(row,"Tel");
  createTableHeader(row,"Addr");
  thead.appendChild(row);

  var tbody = document.createElement("tbody");
  table.appendChild(tbody);
  for(var i=0; i<json.customers.length; i++) {
  var row = document.createElement("tr");
  createTableData(row,json.customers[i].name);
      createTableData(row,json.customers[i].age);
createTableData(row,json.customers[i].tel);
createTableData(row,json.customers[i].addr);
tbody.appendChild(row);
}
document.getElementById("serverResponse").innerHTML = "";
  document.getElementById("serverResponse").appendChild(table); }

------------------------------------------------------------------