[Javascript] 동적으로 열과행이 늘어나는 표(table) 만들기 (domtoimage)

기본적으로 table, tr, td, tbody, thead 등의 테이블을 구현 할 수 있는 tag 들로 html을 짜놓는다.

<div id="table" style={{backgroundColor: '#fff', padding: '20px', width: '98%' }}>
  <h2>Size Info</h2>
  <table id="sizeTable">
    <thead>
    <tr className="tr">
      <td>사이즈</td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>
    </thead>
    <tbody className="tbody">
    <tr className="tr">
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>
    <tr className="tr">
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>
    <tr className="tr">
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>
    <tr className="tr">
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
      <td><input type="text"/></td>
    </tr>
    </tbody>
  </table>
  <br/>
</div>
<Button style={{marginRight: "5px"}} onClick={() => setTableRow()} variant="contained">添加横项</Button>
<Button style={{marginRight: "5px"}} onClick={() => setTableCol()}
        variant="contained">添加纵(竖)向</Button>
<Button onClick={() => setTableComplete()} variant="contained" color={'primary'}>완료</Button>

setTableRow : 행을 늘려주는 함수

setTableCol : 열을 늘려주는 함수

setTableComplete : domtoimage 모듈을 이용하여 blob으로 이미지를 만들어주는 함수

import $ from "jquery"
import domtoimage from "dom-to-image"
import {dataProvider} from "../../../App"
import {convertImagePath} from "../../../providers/data/products"

const setTableRow = () => {
  const trTags = document.getElementsByClassName('tr')
  const trCount = trTags[0].cells.length
  const tr = document.createElement("tr");
  tr.setAttribute('class', 'tr')
  let innerHTMLString = ""
  for (let i = 0; i < trCount; i++) {
    innerHTMLString += `<td><input type="text" /></td>`
  }
  tr.innerHTML = innerHTMLString
  console.log(tr)
  const tbody = document.getElementsByClassName('tbody')
  tbody[0].appendChild(tr)
}

const setTableCol = () => {
  const trTags = document.getElementsByClassName('tr')
  console.log(trTags)
  trTags.forEach((value) => {
    const td = document.createElement("td");
    const input = `<input type="text"/>`
    td.innerHTML = input
    value.appendChild(td)
  })
}

const setTableComplete = async () => {
  const sizeTable = $("#sizeTable");
  sizeTable.find('input').each(function () {
    $(this).replaceWith("<span>" + this.value + "</span>");
  });
  const text = document.createElement("div");
  text.innerHTML = `* 측정방법에 따라 사이즈는 2cm~3cm 정도 오차가 발생할수 있습니다.
<br/>* 사진 촬영의 조명과 환경에 따라 실제 제품의 색상과 차이날 수 있습니다. 
<br/>* 해외생산제품으로 한국상품의 사이즈와 다르니 반드시 치수를 확인해 주시기 바랍니다  <br/>`
  const sizeTabled = document.getElementById('table')
  sizeTabled.appendChild(text)

  const test = await domtoimage.toBlob(document.getElementById('table'))
  const chunk = test.slice(0,65535, 'image/jpg');
  const {data: {url, path}} = await dataProvider('UPLOAD', 'files', {data: {type:'images',category:'products',mimeType:'image/jpg'}})
  await axios.put(url, chunk, {headers: {'Content-Type': 'image/jpg'}})

  const data = rest.formData.detailImages;
  data.push({src:convertImagePath(path) ,path:path})
  form.change('detailImages',data )
}

 react 문법이 몇 개 들어가있지만 대충하고 넘어가겠다.

#table table {width: 100%}
#table table thead {border: 1px solid black; border-collapse: collapse; text-align: center}
#table table tr td {border: 1px solid black; border-collapse: collapse; text-align: center}
#table thead {background-color: #c9c6b4}
#table thead tr td input {background-color: #c9c6b4; border: none}
#table td{padding:5px;}

id: table 이라는 tag 자식들에 대한 css

, vs 스페이스

 

, 은 동등하게 전부 들어가는 것이라 자식만 안들어가고 다른 영역을 침범 하였다.

계속 자식들로 타고들어가는 것 이였다.