shanghanrun · March 27, 2023 05:54
diff --git a/index.html b/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>
diff --git a/script9.js b/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')
    }
  })
 }
	<!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>



	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')
	}
	})
	}