我正在尝试添加新行以防单击按钮。应该在按钮所在的行之后添加此行。我正在使用Jquery（1.10.2）添加新行。
我遇到的问题是.closest函数不能像我期望的那样工作。当我将硬编码的类粘贴到.insertAfter时，它可以正常工作。
这行代码对我不起作用：
$("<tr> <td> Test </td> </tr>").insertAfter($(this).closest('.rowToClone'));
正如我所说，当我将一个类硬编码到.insertAfter()时，它确实有效。所以我想我的问题存在于.closest()函数中。
编辑（整个jquery）：
<script>
var dagen = ["Ma", "Di", "Wo", "Do", "Vr", "Za", "Zo"];
var selects = [];
var lengte = dagen.length;
function addRow()
{
for(var i = 0; i < lengte; i++)
{
//Get all of the hours selected by the Dropdown boxes
selects[i] = $('select[name="' + dagen[i] + '_uurTot"] option:selected').text();
// clone these boxes and changing the name, adding value of I from the for loop to the name Example Ma1_uurVan
//selectVan = $('select[name="' + dagen[i] + '_uurVan"]').clone();
//selectVan.attr("name", dagen[i] + i + "_uurVan");
// clone these boxes and changing the name, adding value of I from the for loop to the name Example Ma1_uurTot
//selectTot = $('select[name="' + dagen[i] + '_uurTot"]').clone();
//selectVan.attr("name", dagen[i] + i + "_uurVan");
// If the hours those are selected not 22:00, duplicating the row is possible.
if(selects[i] !== '22:00')
{
$("<tr> <td> Test </td> </tr>").insertAfter('.rowToClone'); // Works, but adds row to all the rows with .rowToClone
// $("<tr> <td> Test </td> </tr>").insertAfter($(this).closest('.rowToClone')); // DOES NOT WORK
}
}
}
</script>
这是我的HTML：
<table id="beschikbaarheid" class="table table-bordered table-striped">
<input type="hidden" name="control" value="admin"/>
<input type="hidden" name="action" value="beschikbaarheid"/>
<thead>
<th class="hidden-xs " style="color:white;">Dag</th>
<th class="hidden-xs " style="color:white;">Van</th>
<th class="hidden-xs " style="color:white;">Tot</th>
<th class="hidden-xs " style="color:white;">Rij aanmaken</th>
<th class="hidden-xs " style="color:white;">Status</th>
</thead>
<tbody>
<tr class="rowToClone">
<td>Maandag <td>
<select name="Ma_uurVan">
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
</select>
</td>
<td>
<select name="Ma_uurTot">
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
</select>
</td>
<td>
<button type="button" onclick="addRow()"> Voeg rij toe </button>
</td>
<td>
<select name="StatusMa">
<option>Beschikbaar</option>
<option selected >Niet beschikbaar</option>
</select>
</td>
</tr>
编辑：因为大量的html代码。我只插入了第一行。
答案 0 :(得分：0)
jQuery函数.parent()将获得所需项的父级。您可以按照按钮的祖父母的方式工作，并执行.insertAfter()向表中添加行。您可以在此处查看示例：http://jsfiddle.net/2L6b9kvr/1/
在addRow函数中，我抓住了按钮的祖父元素（在这种情况下，它是tr）。然后我在祖父表变量之后插入新的HTML tr。然后我解除绑定并将所有.addRow重新绑定到addRow函数。
答案 1 :(得分：0)
而不是在HTML中使用：
<button onclick="addRow();">some text here</button>
尝试在你的js文件中使用：
$(document).ready(function(){
$('button').click(function(){
selects[i] = $('select[name="' + dagen[i] + '_uurTot"] option:selected').text();
// If the hours those are selected not 22:00, duplicating the row is possible.
if(selects[i] !== '22:00')
{
$("<tr> <td> Test </td> </tr>").insertAfter($(this).closest('.rowToClone'));
}
});
});