jquery атрибуты сортируемой таблицы с регулярным выражением не работают

Question

Почему замена не работает? Когда я использую только СЧЕТЧИК + 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

Проблема сводится к использованию .attr("id") для элемента, который не имеет атрибута 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 здесь не имеют идентификатора. Это приводит к undefined, когда вы звоните .attr("id"). Поскольку это не STRING, .replace() завершается ошибкой. Чтобы решить эту проблему, вы должны исключить эти элементы из вашего селектора или каким-либо другим способом. Кроме того, поскольку селектор захватывает все элементы INPUT, он неоднозначен и не будет работать должным образом. Поэтому вам следует перебирать каждый из них и обновлять их идентификаторы, когда идентификатор найден.

$(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>