【发布时间】：2019-02-21 05:21:29
【问题描述】：
我想在表格中使用 2 个按钮来添加或删除一行。我找到了一个适合我需要的解决方案，不幸的是我无法让删除功能工作。
谁能告诉我哪里出错了？我发现永远无法到达if(null != chkbox && true == chkbox.checked) 循环。
我使用了这个解决方案：https://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/
multiCapture.php
<form action="#">
<input type="button" value="Add Row" onclick="addRow('myTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('myTable')" />
<p id="test">Test</p>
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable" border=1>
<tr>
<th></th>
<th>Geschlecht</th>
<th>Anrede</th>
<th>Vorname</th>
<th>Nachname</th>
<th>Titel</th>
<th>E-Mail</th>
<th>Sendedatum</th>
<!-- <th>Edit</th>-->
</tr>
<tr>
<td>
<p>
<label>
<input type="checkbox" name="chk"/>
<span></span>
</label>
</p>
</td>
<td>
<div class="input-field">
<div>
<label for="selectOption1">Geschlecht angeben:</label>
<select class="browser-default" id="selectOption1" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Männlich">Männlich</option>
<option value="Weiblich">Weiblich</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-field">
<div>
<label for="selectOption2">Anrede angeben:</label>
<select class="browser-default" id="selectOption2" required>
<option value="Bitte auswählen" selected>Bitte auswählen</option>
<option value="Sehr geehrter">Sehr geehrter</option>
<option value="Sehr geehrte">Sehr geehrte</option>
<option value="Lieber">Lieber</option>
<option value="Liebe">Liebe</option>
<option value="Werter">Werter</option>
<option value="Werte">Werte</option>
<option value="Hallo">Hallo</option>
</select>
</div>
</div>
</td>
<td>
<div>
<input id="vorname" type="text" class="validate">
</div>
</td>
<td>
<div>
<input id="nachname" type="text" class="validate">
</div>
</td>
<td>
<div>
<input id="titel" type="text">
</div>
</td>
<td>
<div>
<input id="vorname" type="text" class="validate">
</div>
</td>
<td>
<input type="text" class="datepicker">
</td>
<!-- <td>-->
<!-- <input type='button' class='AddNew' value='+'>-->
<!-- </td>-->
</tr>
</table>
</div>
</div>
</form>
<script type="application/x-javascript">
$('#selectOption1').on('change', setAnrede);
function setAnrede() {
if ($(this).val() === 'Männlich') {
$('.input-field option[value="Sehr geehrte"]').hide();
$('.input-field option[value="Liebe"]').hide();
$('.input-field option[value="Werte"]').hide();
$('.input-field option[value="Sehr geehrter"]').show();
$('.input-field option[value="Lieber"]').show();
$('.input-field option[value="Werter"]').show();
}
if ($(this).val() === 'Weiblich') {
$('.input-field option[value="Sehr geehrter"]').hide();
$('.input-field option[value="Lieber"]').hide();
$('.input-field option[value="Werter"]').hide();
$('.input-field option[value="Sehr geehrte"]').show();
$('.input-field option[value="Liebe"]').show();
$('.input-field option[value="Werte"]').show();
}
}
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;
//alert(newcell.childNodes);
switch(newcell.childNodes[1].type) {
case "checkbox":
newcell.childNodes[1].checked = false;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[1].childNodes[1];
document.getElementById('test').innerHTML = "before if loop";
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>
【问题讨论】：
标签： javascript dynamic html-table row