Question

我面临的问题是我的数据条目似乎是通过edit-mode的类名链接的。因此，当我单击“编辑”按钮时，它不仅显示表的输入字段，而且还会触发所有其他数据库条目以显示这些输入字段。

第一个图像位于单击编辑按钮之前，第二个图像位于单击按钮之后，但是如果在第二行中单击“编辑”，则不会触发我的jquery函数。

我尝试使用querySelectorAll捕获行ID和按钮的值，并尝试仅捕获那些相等的输入字段。

<table>
  <tr id="@item.rowIndex">
    <td>
      <span class="display-mode" id="StringTripType">
        @item.StringTripType<br /><br /><br /><br />
      </span>
      <label class="edit-mode">
        <input type="radio" name="newTrip" value="1"  /> One Way
        <input type="radio" name="newTrip" value="2"  /> Round Trip
      </label>
      <button type="button" id="triggerEditing" value="@item.RowIndex" class="btn btn-primary">Edit</button><br /><br /><br />
      <button type="button" id="cancel" class="btn btn-primary">Cancel</button>
      <button type="submit" name="Save" id="save" class="btn btn-primary" value="@item.RowIndex" formaction="@Url.Action("Edit")">Save Changes</button>
    </td>
  </tr>
</table>

<script>
  document.getElementById("save").style.visibility = "hidden";
  document.getElementById("cancel").style.visibility = "hidden";

  [].forEach.call(document.querySelectorAll('.edit-mode'), function (el) {
    el.style.visibility = 'hidden';
  });

  $('#cancel').click(function cancel() {
    document.getElementById("save").style.visibility = "hidden";
    document.getElementById("cancel").style.visibility = "hidden";
    [].forEach.call(document.querySelectorAll('.edit-mode'), function (el) {
      el.style.visibility = 'hidden';
    });

    document.getElementById("triggerEditing").style.visibility = "visible";
  });

  $(document).ready(function () {
    $('#triggerEditing').click(function () {
      //var $item = $(this).closest("tr").find("td");
      //$.each($item, function (el) {
      //    el.style.visibility = "visible";
      //});

      document.getElementById("triggerEditing").style.visibility = "hidden";
      document.getElementById("save").style.visibility = "visible";
      document.getElementById("cancel").style.visibility = "visible";               
      /*var row = $(this).next();
      var selection = false;
      while (row.hasClass('edit-mode')) {
        if (!selection) {
          selection = row;
          row.style.visibility = "visible";
        }
        else {
          selection.add(row);
        }
        row = row.next();
      }*/

      [].forEach.call(document.querySelectorAll('.edit-mode'), function (el) {
        el.style.visibility = 'visible';
      });
      if ('#cancel'.click) {
        cancel();
      }

    });
  });
</script>

显示包含所选按钮的表的行

0 个答案: