Skip to content

Instantly share code, notes, and snippets.

@shanghanrun

shanghanrun/index.html

Last active March 27, 2023 05:54
Show Gist options
  • Save shanghanrun/5594696dbe7322116ac204468b7a2011 to your computer and use it in GitHub Desktop.
Save shanghanrun/5594696dbe7322116ac204468b7a2011 to your computer and use it in GitHub Desktop.
Download ZIP
html로 테이블작업01
Raw
index.html
<!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>table 만들기</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 10px;
}
.active {
background-color: blueviolet;
}
</style>
</head>
<body>
<div></div>
<input type="file" onChange="main()">
<!-- <input type="file"> -->
<div>
</div>
<!-- <a /> 나중에 페이지네이션 구현할 부분-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.5/xlsx.full.min.js"></script>
<script src="script9.js"></script>
<!-- <script src="script2.js"></script>
<script src="script3.js"></script>
<script src="script4.js"></script>
<script src="script5.js"></script> -->
<!-- <script src="script6.js"></script> -->
</body>
</html>
Raw
script9.js
const td= document.createElement('td')
const head_list =[' ','이름', '나이']
const data_pack =[]
let totalPage
let tr_data = document.createElement('tr')
function main(){
let file = event.target;
let reader = new FileReader();
reader.readAsText(file.files[0], 'UTF-8')
reader.onload = function(){ // 비동기 실행
let data = reader.result;
console.log(data);
data = convertData(data);
console.log(data);
const dataLength = data.length
totalPage = Math.ceil(dataLength /10)
const currentPage = 1
const data_list =[] // 콤마를 없애고, 분리해서 리스트로 저장
data.forEach(item =>{
data_list.push(item.split(","))
})
console.log(data_list)
let set_10Data =[]
for(let i=0; i < data_list.length/10; i++){
for(j=0; j<10 ; j++){
if(i*10+j < data_list.length){
set_10Data.push(data_list[i*10 +j])
}
}
data_pack.push(set_10Data)
set_10Data = []
}
console.log(data_pack);
drawInitialPage();
};
}
function convertData(data){
const rows = data.split(`\r\n`) // 어떤 경우 `\n`
//['이미자,43', '나훈아,56', '박중훈,51']
return rows
}
function drawInitialPage(){
console.log('page: ',1)
drawTable(1)
drawPageButton()
const button = document.querySelector('button')
button.classList.add('active')
}
function drawPage(page){
console.log('page: ', page);
clearPage();
drawTable(page)
drawPageButton()
editPageButton(page)
}
function clearPage(){
const table = document.querySelector('table')
table.remove()
const buttons = document.querySelectorAll('button')
buttons.forEach(button=>{
button.remove()
})
}
function drawTable(page){
const index = page-1
const currentSet = data_pack[index]
console.log(currentSet)
const newTable = document.createElement('table')
const newTbody = document.createElement('tbody')
//title 넣기
const newThead = document.createElement('thead')
const tr_head = document.createElement('tr')
head_list.forEach(title =>{
const th = document.createElement('th')
th.innerHTML = title
tr_head.appendChild(th)
})
//td에 각 데이터 넣기
currentSet.forEach((data, index) =>{
const tr_data = document.createElement('tr')
const td_num = document.createElement('td')
td_num.innerHTML = index+1
tr_data.appendChild(td_num)
data.forEach(item=>{
const td = document.createElement('td')
td.innerHTML = item
tr_data.appendChild(td)
})
newThead.append(tr_head)
newTbody.appendChild(tr_data)
});
newTable.appendChild(newThead)
newTable.appendChild(newTbody)
document.body.appendChild(newTable)
}
function drawPageButton(){
for(let i=1; i<=totalPage; i++){
const button = document.createElement('button')
button.innerHTML = i
button.id = i
button.addEventListener('click',(e)=>{
const page = e.target.innerHTML;
drawPage(page)}) //-1 해야 인덱스
document.body.appendChild(button)
}
}
function editPageButton(page){
const buttons = document.querySelectorAll('button')
buttons.forEach(button=>{
if(button.innerHTML === page){
button.classList.add('active')
} else{
button.classList.remove('active')
}
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment