오늘은 자바 평가가 있는 날이다라라당..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step10_example.html</title>
</head>
<body>
<button id = "addBtn">추가</button>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//원격지 서버로 부터 받아오 UI에 출력할 정보를 가지고 있는 JSON 문서(문자열)이라고 가정
const data = `{"num":1, "name":"김구라", "addr":"노량진"}`;
document.querySelector("#addBtn").addEventListener("click", ()=>{
const obj = JSON.parse(data);
const tr = `
<tr>
<td>${obj.num}</td>
<td>${obj.name}</td>
<td>${obj.addr}</td>
</tr>
`;
document.querySelector("tbody").insertAdjacentHTML("beforeend", tr);
});
</script>
</body>
</html>JSON데이터를 오브젝트로 변경해서 버튼을 눌렀을 때 표에 추가 되도록 해보았다.
document.querySelector("#addBtn2").addEventListener("click", ()=>{
//json 문서를 활용해서 object 를 만든다
const obj = JSON.parse(data);
//tr 요소를 만들어서 참조값을 벼수에 담는다.
let tr = document.createElement("tr");
//td 요소를 3개를 만들어서 innerText 를 출력한다.
let td1 = document.createElement("td");
let td2 = document.createElement("td");
let td3 = document.createElement("td");
td1.innerText = obj.num;
td2.innerText = obj.name;
td2.innerText = obj.addr;
//td요소를 tr요소에 append 시킨다.
tr.append(td1);
tr.append(td2);
tr.append(td3);
//tr 요소를 tbody에 append 시킨다.
document.querySelector("tbody").append(tr);
});append를 통한 다른 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step10_example2.html</title>
</head>
<body>
<button id = "showBtn">목록보기</button>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//원격지 서버로 부터 받아온 json 문자열이라고 가정
const data=`[
{"num" : 1, "name" : "김구라", "addr" : "노량진"},
{"num" : 2, "name" : "해골", "addr" : "행신동"},
{"num" : 3, "name" : "원숭이", "addr" : "상도동"}
]`;
//목록보기 버튼을 눌렀을 때 회원 목록을 tbody에 출력해 보세요.
document.querySelector("#showBtn").addEventListener("click", ()=>{
const arr=JSON.parse(data);
for(let i = 0; i < arr.length; i++){
const tr = `
<tr>
<td>${arr[i].num}</td>
<td>${arr[i].name}</td>
<td>${arr[i].addr}</td>
</tr>
`;
document.querySelector("tbody").insertAdjacentHTML("beforeend", tr);
}
});
</script>
</body>
</html>반복문을 통한 공부
package test.frame;
import java.awt.BorderLayout;
import java.awt.Color;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import javax.swing.JTextField;
import javax.swing.table.DefaultTableModel;
public class TestFrame extends JFrame{
//생성자
public TestFrame(String title) {
super(title);
//레이아웃 매니져 설정
setLayout(new BorderLayout());
JLabel label1 = new JLabel("이름");
JTextField inputName = new JTextField(10);
//패널에 UI를 배치하고
JPanel panel = new JPanel();
panel.add(label1);
panel.add(inputName);
//패널째로 프레임의 북쪽에 배치
add(panel, BorderLayout.NORTH);
panel.setBackground(Color.yellow);
JTable table = new JTable();
String[] colNames = {"번호", "이름", "주소"};
//테이블에 연결할 모델객체 생성
DefaultTableModel model = new DefaultTableModel();
//모델을 테이블에 연결한다.
table.setModel(model);
//스크롤이 가능 하도록 테이블을 JScrollPane 에 감싼다.
JScrollPane scroll = new JScrollPane(table);
//테이블을 프레임의 중앙에 배치한다.
add(table, BorderLayout.CENTER);
//부모 객체의 메소드를 마음대로 호출할 수 있다.
// this.setDefaultCloseOperation(EXIT_ON_CLOSE);
// this.setBounds(100, 100, 800, 500);
// this.setVisible(true);
}
//run 했을때 실행의 흐름이 시작되는 main 메소드
public static void main(String[] args) {
TestFrame f = new TestFrame("테스트 프레임");
f.setDefaultCloseOperation(EXIT_ON_CLOSE);
f.setBounds(100, 100, 800, 500);
f.setVisible(true);
}
}자바 gui중 테이블을 만드는 방법을 공부하는 중!
'수업내용' 카테고리의 다른 글
| 20230519 수업내용😭 (0) | 2023.05.19 |
|---|---|
| 20230518 수업내용🤷♀️🤷♀️🤷♀️ (0) | 2023.05.18 |
| 20230516 수업내용🤦♂️🤦♂️🤦♂️🤦♂️ (0) | 2023.05.16 |
| 20230515 수업내용🙌🙌🙌🙌 (0) | 2023.05.15 |
| 20230512 수업내용 (0) | 2023.05.12 |
댓글