1

I'm creating an attendance but my checkboxes are not properly align with the number of days. how do I properly align them?

I tried changing the width or any size of the checkboxes, changing the header, and even tried changing the input type text but nothing is happening.

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;
  
  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    
    switch (newcell.childNodes[0].type) {
      case "text":
        newcell.childNodes[0].value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }
}
body {
  line-height: 1.9;
  margin: 2em;
  min-width: 1000000px;
}

th {
  background-color: #001f3f;
  color: #fff;
  padding: 1em 1.3em;
}

td {
  border-top: 5px solid #eee;
  padding: 0.5em 1em;
}

input {
  cursor: pointer;
}

/* Column types */
th.missed-col {
  background-color: #f00;
}

}

th.Attend-col {
  background-color: #f00;
}

td.Attend-col {
  background-color: #ffecec;
  color: #f00;
  text-align: center;
}

.name-col {
  text-align: left;
  min-width: 11rem;
}

input::placeholder {
  font-weight: bold;
  opacity: .5;
  color: black;
}
<h1>Attendance</h1>
<label for="start">Start month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2018-05">

<table>
  <thead>
    <tr>
      <th class="name-col">Name</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
      <th>13</th>
      <th>14</th>
      <th>15</th>
      <th>16</th>
      <th>17</th>
      <th>18</th>
      <th>19</th>
      <th>20</th>
      <th>21</th>
      <th>22</th>
      <th>23</th>
      <th>24</th>
      <th>25</th>
      <th>26</th>
      <th>27</th>
      <th>28</th>
      <th>29</th>
      <th>30</th>
      <th>31</th>
    </tr>
  </thead>

  <input type="button" value="Add Row" onclick="addRow('dataTable')">

<table id="dataTable" width="350px" border="1">

  <tbody>
    <tr class="visitor">
      <td class="name-col"><input type="text" placeholder="Your name"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>

      <td>
        <button type="button" class="close" aria-hidden="true" onclick="deleteRow(this);">&times;</button>
      </td>
    </tr>
  </tbody>
</table>

<h1>Attendance</h1>
<label for="start">Start month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2018-05">

<table>
  <thead>
    <tr>
      <th class="name-col">Name</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
      <th>13</th>
      <th>14</th>
      <th>15</th>
      <th>16</th>
      <th>17</th>
      <th>18</th>
      <th>19</th>
      <th>20</th>
      <th>21</th>
      <th>22</th>
      <th>23</th>
      <th>24</th>
      <th>25</th>
      <th>26</th>
      <th>27</th>
      <th>28</th>
      <th>29</th>
      <th>30</th>
      <th>31</th>
    </tr>
  </thead>

  <input type="button" value="Add Row" onclick="addRow('dataTable')">

<table id="dataTable" width="350px" border="1">

  <tbody>
    <tr class="visitor">
      <td class="name-col"><input type="text" placeholder="Your name"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>

      <td>
        <button type="button" class="close" aria-hidden="true" onclick="deleteRow(this);">&times;</button>
      </td>
    </tr>
  </tbody>
</table>

1
  • 1
    I'm not sure why you inserted table inside table. Maybe problem is in this. Try to remove this line: <table id="dataTable" width="350px" border="1">
    – DShadrin
    Nov 23, 2022 at 8:41

1 Answer 1

0

Like @DShadrin wrote, your issue is, that you have another <table> tag between <thead> and <tbody>:

</thead>

<input type="button" value="Add Row" onclick="addRow('dataTable')">

<table id="dataTable" width="350px" border="1">

<tbody>

Therefor the table is divided in two tables, which align their elements independently. If you remove the second <table> tag, the elements are aligned properly:

By the way: you add the table head as new row, because you select the first row with the index 0 (table.rows[0]). You should change it to the index 1 if you want the new row to contain the text input and the checkboxes:

newcell.innerHTML = table.rows[1].cells[i].innerHTML;

Working example:

function addRow(tableID) {
  var table = document.getElementById(tableID);
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  var colCount = table.rows[0].cells.length;
  
  for (var i = 0; i < colCount; i++) {
    var newcell = row.insertCell(i);
    newcell.innerHTML = table.rows[1].cells[i].innerHTML;
    
    switch (newcell.childNodes[0].type) {
      case "text":
        newcell.childNodes[0].value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }
}
body {
  line-height: 1.9;
  margin: 2em;
  min-width: 1000000px;
}

th {
  background-color: #001f3f;
  color: #fff;
  padding: 1em 1.3em;
}

td {
  border-top: 5px solid #eee;
  padding: 0.5em 1em;
}

input {
  cursor: pointer;
}

/* Column types */
th.missed-col {
  background-color: #f00;
}

th.Attend-col {
  background-color: #f00;
}

td.Attend-col {
  background-color: #ffecec;
  color: #f00;
  text-align: center;
}

.name-col {
  text-align: left;
  min-width: 11rem;
}

input::placeholder {
  font-weight: bold;
  opacity: .5;
  color: black;
}
<h1>Attendance</h1>
<label for="start">Start month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2018-05">

<table id="dataTable" width="350px" border="1">
  <thead>
    <tr>
      <th class="name-col">Name</th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
      <th>10</th>
      <th>11</th>
      <th>12</th>
      <th>13</th>
      <th>14</th>
      <th>15</th>
      <th>16</th>
      <th>17</th>
      <th>18</th>
      <th>19</th>
      <th>20</th>
      <th>21</th>
      <th>22</th>
      <th>23</th>
      <th>24</th>
      <th>25</th>
      <th>26</th>
      <th>27</th>
      <th>28</th>
      <th>29</th>
      <th>30</th>
      <th>31</th>
    </tr>
  </thead>

  <input type="button" value="Add Row" onclick="addRow('dataTable')">

  <tbody>
    <tr class="visitor">
      <td class="name-col"><input type="text" placeholder="Your name"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>
      <td class="attend-col"><input type="checkbox"></td>

      <td>
        <button type="button" class="close" aria-hidden="true" onclick="deleteRow(this);">&times;</button>
      </td>
    </tr>
  </tbody>
</table>

4
  • Thank you. I'm still a newbie, but I'll try better next time with this information.
    – Jose renzo
    Nov 24, 2022 at 8:59
  • now the add row button didn't copy the input name and checkboxes it copies the name and days. do I need to replace my function add row? is there another method to clone or duplicate the specific row?
    – Jose renzo
    Nov 24, 2022 at 9:15
  • It was the index table.rows[0] - i fixed it in my answer...
    – biberman
    Nov 24, 2022 at 11:34
  • I change the table.rows[0] to table.rows[1] it work thank you
    – Jose renzo
    Nov 24, 2022 at 12:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.