jquery 或table table 使用正则表达式更新属性不起作用

Question

为什么替换不起作用？当我只使用 COUNTER + 1 而不是替换时，它工作得很好。

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

<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")。在您的 table 的第一列中，您有以下内容：

<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。

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

jquery 或table table 使用正则表达式更新属性不起作用

jquery sortable table update attributes with regex dos not work

html

css

jquery

jquery-ui