javascript - How to pass the value or id of a checkbox to a table if it's checked on button click

Question

I want var u to put all of the values or ids that are checked from my Units oriented to label, onto my table as text when I click the add button.
And just for an added bonus, for some reason, my working hours label is at the end of my check boxes. How do I put it on a new line?
I have display: block at the very top of my code.

function insert_Row() {
  var x = document.getElementById('therapists').insertRow(1);
  for (let i = 0; i < 5; i++) x.insertCell(i).innerHTML = '';
  var w = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  w[parseInt(0.10)].innerHTML = "<input type='checkbox'>";
  var v = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  v[parseInt(1, 10)].innerHTML = document.getElementById("tname").value;
  var u = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  u[parseInt(2, 10)].innerHTML = document.getElementById('unitot').value.is(':checked');
  var t = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  t[parseInt(3, 10)].innerHTML = document.getElementById('hours').value;
  var s = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  s[parseInt(4, 10)].innerHTML = "<button onclick='this.closest(\"tr\").remove()'>Remove</button>";
}

input[type=text],
select {
  width: 30%;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=button] {
  width: 30%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

#therapists {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 30%;
}

#therapists td,
#therapists th {
  border: 1px solid #ddd;
  padding: 8px;
}

#therapists tr:nth-child(even) {
  background-color: #f2f2f2;
}

#therapists tr:hover {
  background-color: #ddd;
}

#therapists th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

<div class="topnav">
  <a href="#">Schedule</a>
  <a href="#">Patients</a>
  <a class="active" href="#therapistinfo">Therapists</a>
</div>
<h3>Therapists</h3>
<table id="therapists">
  <tr>
    <th>Working?</th>
    <th>Therapists</th>
    <th>Unit's Oriented To</th>
    <th>Working Hours</th>
    <th> </th>
  </tr>
</table>
<div>
</div>
<div>
  <form action="/action_page.php">
    <label for="tname">Therapist's Name</label>
    <input type="text" id="tname" name="therapistname" placeholder="Therapists's Name..">
    <label for="unitot">Units Oriented To:</label> 64
    <input type="checkbox" id="64" value="64"> 66
    <input type="checkbox" id="66" value="66"> 68
    <input type="checkbox" id="68" value="68"> 76
    <input type="checkbox" id="76" value="76"> ARU
    <input type="checkbox" id="aru" value="aru">
    <label for="hours">Working Hours</label>
    <select id="hours" name="hours">
      <option value="8hrs">8hrs</option>
      <option value="10hrs">10hrs</option>
      <option value="12hrs">12hrs</option>
    </select>
    <input type="button" value="Add" onclick="insert_Row()">
  </form>
</div>

标签： javascripthtmlcss

Answer 1

您有多个输入元素，因此您可以通过添加一个类 (.unitot) 来获取该元素，然后使用带有 querySelector 的函数 slice.call 到达那里：

HTML：

<div class="topnav">
  <a href="#">Schedule</a>
  <a href="#">Patients</a>
  <a class="active" href="#therapistinfo">Therapists</a>
</div>
<h3>Therapists</h3>
<table id="therapists">
  <tr>
    <th>Working?</th>
    <th>Therapists</th>
    <th>Unit's Oriented To</th>
    <th>Working Hours</th>
    <th> </th>
  </tr>
</table>
<div>
</div>
<div>
  <form action="/action_page.php">
    <label for="tname">Therapist's Name</label>
    <input type="text" id="tname" name="therapistname" placeholder="Therapists's Name..">
    <label for="unitot">Units Oriented To:</label> 64
    <input class="unitot" type="checkbox" id="64" value="64"> 66
    <input class="unitot" type="checkbox" id="66" value="66"> 68
    <input class="unitot" type="checkbox" id="68" value="68"> 76
    <input class="unitot" type="checkbox" id="76" value="76"> ARU
    <input class="unitot" type="checkbox" id="aru" value="aru">
    <label for="hours">Working Hours</label>
    <select id="hours" name="hours">
      <option value="8hrs">8hrs</option>
      <option value="10hrs">10hrs</option>
      <option value="12hrs">12hrs</option>
    </select>
    <input type="button" value="Add" onclick="insert_Row()">
  </form>
</div>

JavaScript：

function insert_Row() {
  var x = document.getElementById('therapists').insertRow(1);
  for (let i = 0; i < 5; i++) x.insertCell(i).innerHTML = '';
  var w = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  w[parseInt(0.10)].innerHTML = "<input type='checkbox'>";
  var v = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  v[parseInt(1, 10)].innerHTML = document.getElementById("tname").value;
  var u = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  var unitots = [].slice.call(document.querySelectorAll('.unitot:checked'));
  var unitotsValues = "";
  for ( var i = 0; i < unitots.length; i++ ) {
    if (i >= 1) { unitotsValues += ", " + unitots[i].id; }
    else { unitotsValues = unitots[i].id; }
  } 
   u[parseInt(2, 10)].innerHTML = unitotsValues;
    var t = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  t[parseInt(3, 10)].innerHTML = document.getElementById('hours').value;
  var s = document.getElementById('therapists').rows[parseInt(1, 10)].cells;
  s[parseInt(4, 10)].innerHTML = "<button onclick='this.closest(\"tr\").remove()'>Remove</button>";
}