div table

by Daehyun Im

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.2/pure-min.css">
<form id="test" method="post">
  <div>
    <div class="row">
      <span class="col">no</span>
      <span class="col">name</span>
    </div>
    <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index" value="1"/></span>
      <span class="col">test</span>
    </div>
        <div class="row">
      <span class="col"><input type="checkbox" name="index"...

CSS

div {
  background-color: grey;
  color: white
}

.row {
  display: flex;
}

.col {
  display: flex;
  flex:1;
  border: 1px solid black;
  justify-content: center;
}

JavaScript

document.querySelector("#test").addEventListener("submit", function() {
  event.preventDefault();
  var form = new FormData(document.querySelector("#test"));
  console.log(form.getAll('index'));
});