Home > OS >  Un/check All and box are not in the same row and the Add row button not properly copy the Days misse
Un/check All and box are not in the same row and the Add row button not properly copy the Days misse

Time：01-20

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 ></div>
<h1>Attendance</h1>
<label for="start">Start month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2018-05">

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

  <table id="dataTable" width="350px" border="1">
    <thead>
      <tr>
        <th >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 >Days Missed</th>
        <th>Remove</th>
      </tr>
    </thead>

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


    <tbody>
      <tr >
        <td ><input type="text" placeholder="Your name"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td >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 >
<td>Un/check All</td>
<div >
<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 >
<td>Un/check All</td>
<div >
<input type="checkbox" id="checkAll"/>
<span></span>
</div>

CodePudding user response：

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; }

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 ></div>
<h1>Attendance</h1>
<label for="start">Start month:</label>
<input type="month" id="start" name="start" min="2018-03" value="2018-05">

<div >
  
  <div >
  <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 >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 >Days Missed</th>
        <th>Remove</th>
      </tr>
    </thead>



    <tbody>
      <tr >
        <td ><input type="text" placeholder="Your name"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td ><input type="checkbox"></td>
        <td >0</td>
        <td><input type="button" value="(Delete)"></td>
      </tr>
    </tbody>
  </table>

CodePudding user response：

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 ></div>
<h1>Attendance</h1>

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


<div >
  <div >
    <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 >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 >Days Missed</th>
      <th>Remove</th>
    </tr>
  </thead>

  


  <tbody>
    <tr >
      <td ><input type="text" placeholder="Your name"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td ><input type="checkbox"></td>
      <td >0</td>
      <td><input type="button" value="(Delete)"></td>

    </tr>
  </tbody>
</table>

Page link：https//www.codepudding.com/os/678363.html

Prev:How to send javascript date object with POST request in REST CLIENT (vs code extension)?
Next:State is not passed or received in between components when send through <link to/>
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding