取消/选中所有和框不在同一行中，添加行按钮未正确复制错过的天数

Question

I can't properly align Un/Check All and the box. It always goes between the "month" and "Add row", I just want all of them in the same row but instead the Un/check All and the box are separate rows, while the Add row button does copy the whole row but the column in "Days Missed" is not properly copied, the number 0 is not centered and I notice the second row is not light colored.

I use codepen link https://codepen.io/rhynacpil/pen/dyKmyLE

 function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[1].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; } } } $('table').on('click', 'input[type="button"]', function(e) { $(this).closest('tr').remove() }) $("#checkAll").change(function() { $("input:checkbox").prop('checked', $(this).prop("checked")); });

 body { line-height: 1.9; margin: 2em; min-width: 1100px; } 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; } td.missed-col { background-color: #ffecec; color: #f00; text-align: center; } input::placeholder { font-weight: bold; opacity: .5; color: black; }.mistyrose { height: 100%; width: 100%; top: 0; left: 0; position: fixed; background-image: linear-gradient( 216deg, rgba(77, 77, 77, 0.05) 0%, rgba(77, 77, 77, 0.05) 25%, rgba(42, 42, 42, 0.05) 25%, rgba(42, 42, 42, 0.05) 38%, rgba(223, 223, 223, 0.05) 38%, rgba(223, 223, 223, 0.05) 75%, rgba(36, 36, 36, 0.05) 75%, rgba(36, 36, 36, 0.05) 100%), linear-gradient( 44deg, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.05) 34%, rgba(212, 212, 212, 0.05) 34%, rgba(212, 212, 212, 0.05) 57%, rgba(25, 25, 25, 0.05) 57%, rgba(25, 25, 25, 0.05) 89%, rgba(135, 135, 135, 0.05) 89%, rgba(135, 135, 135, 0.05) 100%), linear-gradient( 241deg, rgba(55, 55, 55, 0.05) 0%, rgba(55, 55, 55, 0.05) 14%, rgba(209, 209, 209, 0.05) 14%, rgba(209, 209, 209, 0.05) 60%, rgba(245, 245, 245, 0.05) 60%, rgba(245, 245, 245, 0.05) 69%, rgba(164, 164, 164, 0.05) 69%, rgba(164, 164, 164, 0.05) 100%), linear-gradient( 249deg, rgba(248, 248, 248, 0.05) 0%, rgba(248, 248, 248, 0.05) 32%, rgba(148, 148, 148, 0.05) 32%, rgba(148, 148, 148, 0.05) 35%, rgba(202, 202, 202, 0.05) 35%, rgba(202, 202, 202, 0.05) 51%, rgba(181, 181, 181, 0.05) 51%, rgba(181, 181, 181, 0.05) 100%), linear-gradient(92deg, rgb(255, 228, 225), rgb(255, 228, 225)); z-index: -6; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mistyrose"></div> <h1>Attendance</h1> <label for="start">Start month:</label> <input type="month" id="start" name="start" min="2018-03" value="2018-05"> <div class="holder"> <td>Un/check All</td> <div class="attendance"> <input type="checkbox" id="checkAll" /> <span></span> </div> <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> <th class="missed-col">Days Missed</th> <th>Remove</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 class="missed-col">0</td> <type="checkbox"> </td> <td><input type="button" value="(Delete)"></td> </tr> </tbody> </table>

I tried placing the un/check all above the start month or after the dataTable but it's still the same. for the "Days missed" column I don't know what is the problem.

<div class="holder">
<td>Un/check All</td>
<div class="attendance">
<input type="checkbox" id="checkAll"/>
<span></span>
</div>

<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">

<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">

<div class="holder">
<td>Un/check All</td>
<div class="attendance">
<input type="checkbox" id="checkAll"/>
<span></span>
</div>

Answer 1

Why not clone. It is much simpler and solves the issue with the 0

Also I gave the checkbox a label and a user-select css rule .holder label { user-select: none; } .holder label { user-select: none; }

I cached the checked state.

I removed some leftover <type="checkbox"></td>

 function addRow(tableID) { const $table = $(`#${tableID} tbody`); const $newRow = $table.find("tr").eq(0).clone(true); $(':input',$newRow).not('[type=button]').val(""); $(':checkbox',$newRow).each(function() { this.checked = false }); $table.append($newRow); } $('table').on('click', 'input[type="button"]', function(e) { $(this).closest('tr').remove() }) $("#checkAll").on("click", function() { const checked = $(this).prop("checked"); // cache the value $("input:checkbox").prop('checked', checked); });

 body { line-height: 1.9; margin: 2em; min-width: 1100px; }.holder label { user-select: none; } 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; } td.missed-col { background-color: #ffecec; color: #f00; text-align: center; } input::placeholder { font-weight: bold; opacity: .5; color: black; }.mistyrose { height: 100%; width: 100%; top: 0; left: 0; position: fixed; background-image: linear-gradient( 216deg, rgba(77, 77, 77, 0.05) 0%, rgba(77, 77, 77, 0.05) 25%, rgba(42, 42, 42, 0.05) 25%, rgba(42, 42, 42, 0.05) 38%, rgba(223, 223, 223, 0.05) 38%, rgba(223, 223, 223, 0.05) 75%, rgba(36, 36, 36, 0.05) 75%, rgba(36, 36, 36, 0.05) 100%), linear-gradient( 44deg, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.05) 34%, rgba(212, 212, 212, 0.05) 34%, rgba(212, 212, 212, 0.05) 57%, rgba(25, 25, 25, 0.05) 57%, rgba(25, 25, 25, 0.05) 89%, rgba(135, 135, 135, 0.05) 89%, rgba(135, 135, 135, 0.05) 100%), linear-gradient( 241deg, rgba(55, 55, 55, 0.05) 0%, rgba(55, 55, 55, 0.05) 14%, rgba(209, 209, 209, 0.05) 14%, rgba(209, 209, 209, 0.05) 60%, rgba(245, 245, 245, 0.05) 60%, rgba(245, 245, 245, 0.05) 69%, rgba(164, 164, 164, 0.05) 69%, rgba(164, 164, 164, 0.05) 100%), linear-gradient( 249deg, rgba(248, 248, 248, 0.05) 0%, rgba(248, 248, 248, 0.05) 32%, rgba(148, 148, 148, 0.05) 32%, rgba(148, 148, 148, 0.05) 35%, rgba(202, 202, 202, 0.05) 35%, rgba(202, 202, 202, 0.05) 51%, rgba(181, 181, 181, 0.05) 51%, rgba(181, 181, 181, 0.05) 100%), linear-gradient(92deg, rgb(255, 228, 225), rgb(255, 228, 225)); z-index: -6; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mistyrose"></div> <h1>Attendance</h1> <label for="start">Start month:</label> <input type="month" id="start" name="start" min="2018-03" value="2018-05"> <div class="holder"> <div class="attendance"> <label onclick="this.blur()">Un/check All <input type="checkbox" id="checkAll" /></label> </div> <input type="button" value="Add Row" onclick="addRow('dataTable')"> <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> <th class="missed-col">Days Missed</th> <th>Remove</th> </tr> </thead> <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 class="missed-col">0</td> <td><input type="button" value="(Delete)"></td> </tr> </tbody> </table>

Answer 2

You need to move the input button from its current position in the table and remove the table cell tags from within the div - and by placing both the words check/uncheck all and the checkbox within a label element you can, if you wish, apply styling directly to govern its appearance much easier than when separate.

 const clearinput=(n)=>{ switch(n.type){ case 'text':n.value='';break; case 'checkbox':n.checked=false;break; case 'select-one':n.selectedIndex=0;break; } } /* It is possible to `clone` the entire row rather than build new each time - any inputs within are reset prior to insertion to the DOM */ const addRow=(id)=>{ let table=document.getElementById(id); let tr=table.querySelector('tbody tr:first-of-type'); if( tr ){ let clone=tr.cloneNode(true); clone.querySelectorAll('[type="checkbox"]').forEach(n=>clearinput(n)); table.querySelector('tbody').appendChild( clone ); } } $('table').on('click', 'input[type="button"]', function(e){ if( document.querySelectorAll('tr.visitor').length > 1 ){ $(this).closest('tr').remove() } }) $("#checkAll").change(function () { $("input:checkbox").prop('checked', $(this).prop("checked")); });

 body { line-height: 1.9; margin: 2em; min-width: 1100px; } 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; } td.missed-col { background-color: #ffecec; color: #f00; text-align: center; } input::placeholder { font-weight: bold; opacity: .5; color: black; }.mistyrose { height: 100%; width: 100%; top: 0; left: 0; position: fixed; background-image: linear-gradient( 216deg, rgba(77, 77, 77, 0.05) 0%, rgba(77, 77, 77, 0.05) 25%, rgba(42, 42, 42, 0.05) 25%, rgba(42, 42, 42, 0.05) 38%, rgba(223, 223, 223, 0.05) 38%, rgba(223, 223, 223, 0.05) 75%, rgba(36, 36, 36, 0.05) 75%, rgba(36, 36, 36, 0.05) 100%), linear-gradient( 44deg, rgba(128, 128, 128, 0.05) 0%, rgba(128, 128, 128, 0.05) 34%, rgba(212, 212, 212, 0.05) 34%, rgba(212, 212, 212, 0.05) 57%, rgba(25, 25, 25, 0.05) 57%, rgba(25, 25, 25, 0.05) 89%, rgba(135, 135, 135, 0.05) 89%, rgba(135, 135, 135, 0.05) 100%), linear-gradient( 241deg, rgba(55, 55, 55, 0.05) 0%, rgba(55, 55, 55, 0.05) 14%, rgba(209, 209, 209, 0.05) 14%, rgba(209, 209, 209, 0.05) 60%, rgba(245, 245, 245, 0.05) 60%, rgba(245, 245, 245, 0.05) 69%, rgba(164, 164, 164, 0.05) 69%, rgba(164, 164, 164, 0.05) 100%), linear-gradient( 249deg, rgba(248, 248, 248, 0.05) 0%, rgba(248, 248, 248, 0.05) 32%, rgba(148, 148, 148, 0.05) 32%, rgba(148, 148, 148, 0.05) 35%, rgba(202, 202, 202, 0.05) 35%, rgba(202, 202, 202, 0.05) 51%, rgba(181, 181, 181, 0.05) 51%, rgba(181, 181, 181, 0.05) 100%), linear-gradient(92deg, rgb(255, 228, 225), rgb(255, 228, 225)); z-index: -6; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mistyrose"></div> <h1>Attendance</h1> <label>Start month: <input type="month" name="start" min="2018-03" value="2018-05" /></label> <div class="holder"> <div class="attendance"> <label>Un/check All<input type="checkbox" id="checkAll" /></label> <span></span> </div> </div> <input type="button" value="Add Row" onclick="addRow('dataTable')"> <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> <th class="missed-col">Days Missed</th> <th>Remove</th> </tr> </thead> <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 class="missed-col">0</td> <td><input type="button" value="(Delete)"></td> </tr> </tbody> </table>