jquery可排序表使用regex更新属性不起作用

Question

为什么替换不起作用？当我只使用COUNTER+1而不是替换时，它非常有效。

我不知道为什么这不起作用，但必须有一个解决方案。我必须更改这个计数器，因为我想以相同的顺序将表条目保存在数据库中，为此我需要按顺序排列计数器编号。

<table id="SCHEDULE_1346334" class="table table_striped table_hover">
<thead>
<tr>
<th>Zeit</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
<th>
<button type="button" id="SCHEDULE_1346334_ADD" class="button add">+</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form_group">
<input name="TIME_START_1" type="time" value="17:00" class="form_control"></input>
<div class="form_pend form_midpend">-</div>
<input name="TIME_STOP_1" type="time" value="21:00" class="form_control"></input>
</div>
</td>
<td>
<input name="MONDAY_1" type="checkbox" id="1346334_MONDAY_1" class="checkbox" checked></input>
<label for="1346334_MONDAY_1" class="label"></label>
</td>
<td>
<input name="TUESDAY_1" type="checkbox" id="1346334_TUESDAY_1" class="checkbox" checked></input>
<label for="1346334_TUESDAY_1" class="label"></label>
</td>
<td>
<input name="WEDNESDAY_1" type="checkbox" id="1346334_WEDNESDAY_1" class="checkbox" checked></input>
<label for="1346334_WEDNESDAY_1" class="label"></label>
</td>
<td>
<input name="THURSDAY_1" type="checkbox" id="1346334_THURSDAY_1" class="checkbox" checked></input>
<label for="1346334_THURSDAY_1" class="label"></label>
</td>
<td>
<input name="FRIDAY_1" type="checkbox" id="1346334_FRIDAY_1" class="checkbox" checked></input>
<label for="1346334_FRIDAY_1" class="label"></label>
</td>
<td>
<input name="SATURDAY_1" type="checkbox" id="1346334_SATURDAY_1" class="checkbox" checked></input>
<label for="1346334_SATURDAY_1" class="label"></label>
</td>
<td>
<input name="SUNDAY_1" type="checkbox" id="1346334_SUNDAY_1" class="checkbox" checked></input>
<label for="1346334_SUNDAY_1" class="label"></label>
</td>
<td>
<button type="button" id="SCHEDULE_1346334_DEL" class="button del">-</button>
</td>
</tr>
<tr>
<td>
<div class="form_group">
<input name="TIME_START_2" type="time" value="06:00" class="form_control"></input>
<div class="form_pend form_midpend">-</div>
<input name="TIME_STOP_2" type="time" value="07:00" class="form_control"></input>
</div>
</td>
<td>
<input name="MONDAY_2" type="checkbox" id="1346334_MONDAY_2" class="checkbox" checked></input>
<label for="1346334_MONDAY_2" class="label"></label>
</td>
<td>
<input name="TUESDAY_2" type="checkbox" id="1346334_TUESDAY_2" class="checkbox" checked></input>
<label for="1346334_TUESDAY_2" class="label"></label>
</td>
<td>
<input name="WEDNESDAY_2" type="checkbox" id="1346334_WEDNESDAY_2" class="checkbox" checked></input>
<label for="1346334_WEDNESDAY_2" class="label"></label>
</td>
<td>
<input name="THURSDAY_2" type="checkbox" id="1346334_THURSDAY_2" class="checkbox" checked></input>
<label for="1346334_THURSDAY_2" class="label"></label>
</td>
<td>
<input name="FRIDAY_2" type="checkbox" id="1346334_FRIDAY_2" class="checkbox" checked></input>
<label for="1346334_FRIDAY_2" class="label"></label>
</td>
<td>
<input name="SATURDAY_2" type="checkbox" id="1346334_SATURDAY_2" class="checkbox" checked></input>
<label for="1346334_SATURDAY_2" class="label"></label>
</td>
<td>
<input name="SUNDAY_2" type="checkbox" id="1346334_SUNDAY_2" class="checkbox" checked></input>
<label for="1346334_SUNDAY_2" class="label"></label>
</td>
<td>
<button type="button" id="SCHEDULE_1346334_DEL" class="button del">-</button>
</td>
</tr>
</tbody>
</table>
<script>
$("tbody").sortable(
{
stop: function(event, ui)
{
$(this).find("tr").each(function(COUNTER)
{
$ID = $(this).find("td input").attr("id").replace("/_d+$/", COUNTER + 1);
$(this).find("td input").attr("id", $ID);
});
}
});
</script>

Answer 1

问题归结为在没有ID属性的元素上使用.attr("id")。在表的第一列中，您有以下内容：

<td>
<div class="form_group">
<input name="TIME_START_1" type="time" value="17:00" class="form_control"></input>
<div class="form_pend form_midpend">-</div>
<input name="TIME_STOP_1" type="time" value="21:00" class="form_control"></input>
</div>
</td>

正如您所看到的，这里的INPUT元素没有ID。当您调用.attr("id")时，这会导致undefined。由于这不是字符串，.replace()将失败。若要解决此问题，必须从选择器或其他方式中排除这些元素。此外，由于选择器捕获了所有INPUT元素，因此它是不明确的，无法按预期工作。因此，您应该对每个ID进行迭代，并在找到ID时更新它们的ID。

$(function() {
$("tbody").sortable({
items: "> tr",
stop: function(event, ui) {
$("tr", this).each(function(COUNTER, ROW) {
console.log(COUNTER, $(ROW).prop("nodeName"));
$("input", ROW).each(function(I, INPUT) {
if ($(INPUT).attr("id") != undefined) {
console.log(I, $(INPUT).attr("id"));
$(INPUT).attr("id", $(INPUT).attr("id").replace("/_d+$/", COUNTER + 1));
}
});
});
}
});
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<table id="SCHEDULE_1346334" class="table table_striped table_hover">
<thead>
<tr>
<th>Zeit</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
<th>
<button type="button" id="SCHEDULE_1346334_ADD" class="button add">+</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form_group">
<input name="TIME_START_1" type="time" value="17:00" class="form_control"></input>
<div class="form_pend form_midpend">-</div>
<input name="TIME_STOP_1" type="time" value="21:00" class="form_control"></input>
</div>
</td>
<td>
<input name="MONDAY_1" type="checkbox" id="1346334_MONDAY_1" class="checkbox" checked></input>
<label for="1346334_MONDAY_1" class="label"></label>
</td>
<td>
<input name="TUESDAY_1" type="checkbox" id="1346334_TUESDAY_1" class="checkbox" checked></input>
<label for="1346334_TUESDAY_1" class="label"></label>
</td>
<td>
<input name="WEDNESDAY_1" type="checkbox" id="1346334_WEDNESDAY_1" class="checkbox" checked></input>
<label for="1346334_WEDNESDAY_1" class="label"></label>
</td>
<td>
<input name="THURSDAY_1" type="checkbox" id="1346334_THURSDAY_1" class="checkbox" checked></input>
<label for="1346334_THURSDAY_1" class="label"></label>
</td>
<td>
<input name="FRIDAY_1" type="checkbox" id="1346334_FRIDAY_1" class="checkbox" checked></input>
<label for="1346334_FRIDAY_1" class="label"></label>
</td>
<td>
<input name="SATURDAY_1" type="checkbox" id="1346334_SATURDAY_1" class="checkbox" checked></input>
<label for="1346334_SATURDAY_1" class="label"></label>
</td>
<td>
<input name="SUNDAY_1" type="checkbox" id="1346334_SUNDAY_1" class="checkbox" checked></input>
<label for="1346334_SUNDAY_1" class="label"></label>
</td>
<td>
<button type="button" id="SCHEDULE_1346334_DEL" class="button del">-</button>
</td>
</tr>
<tr>
<td>
<div class="form_group">
<input name="TIME_START_2" type="time" value="06:00" class="form_control"></input>
<div class="form_pend form_midpend">-</div>
<input name="TIME_STOP_2" type="time" value="07:00" class="form_control"></input>
</div>
</td>
<td>
<input name="MONDAY_2" type="checkbox" id="1346334_MONDAY_2" class="checkbox" checked></input>
<label for="1346334_MONDAY_2" class="label"></label>
</td>
<td>
<input name="TUESDAY_2" type="checkbox" id="1346334_TUESDAY_2" class="checkbox" checked></input>
<label for="1346334_TUESDAY_2" class="label"></label>
</td>
<td>
<input name="WEDNESDAY_2" type="checkbox" id="1346334_WEDNESDAY_2" class="checkbox" checked></input>
<label for="1346334_WEDNESDAY_2" class="label"></label>
</td>
<td>
<input name="THURSDAY_2" type="checkbox" id="1346334_THURSDAY_2" class="checkbox" checked></input>
<label for="1346334_THURSDAY_2" class="label"></label>
</td>
<td>
<input name="FRIDAY_2" type="checkbox" id="1346334_FRIDAY_2" class="checkbox" checked></input>
<label for="1346334_FRIDAY_2" class="label"></label>
</td>
<td>
<input name="SATURDAY_2" type="checkbox" id="1346334_SATURDAY_2" class="checkbox" checked></input>
<label for="1346334_SATURDAY_2" class="label"></label>
</td>
<td>
<input name="SUNDAY_2" type="checkbox" id="1346334_SUNDAY_2" class="checkbox" checked></input>
<label for="1346334_SUNDAY_2" class="label"></label>
</td>
<td>
<button type="button" id="SCHEDULE_1346334_DEL" class="button del">-</button>
</td>
</tr>
</tbody>
</table>