如何将复选框的值或 id 传递给表(如果在单击按钮时选中)

Question

当我单击add按钮时，我希望var u将从我的Units到label中检查的所有值或id作为文本放在我的表中。
作为额外的奖励，出于某种原因，我的工作时间标签在我的复选框的末尾。我怎么把它放到一条新线上?
我有display: block在我的代码的最上面。

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>

Answer 1

您有多个输入元素，因此您可以通过添加一个类(.unitot)来获取元素，然后使用函数切片。调用querySelector到达那里:

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