Question

Using jQuery, how can I do the following when clicking the edit icon in the third column:

Change the text in the adjacent second column to an input box
Change the icon class in the third column to a save button
Change the original text in the second column to what was entered into the input box

(Sorry if that's confusing and/or a lot to ask!)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="modal-body">
  <form>
    <table id="modalLinks" class="table table-hover">
      <thead align="left">
        <tr>
          <th scope="col">Name</th>
          <th scope="col-xs-4">URL</th>
          <th scope="col">Edit</th>
        </tr>
      </thead>
      <tbody align="left">
        <tr>
          <th scope="row" id="modalLinkName">Link 1</td>
            <td>
              <a id="modalLinkURL">https://www.link1.com</a>
              <input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
            </td>
            <td>
              <a id="modalEditLink" href="#">icon
                                                <i class="fas fa-pen"></i>
                                            </a>
            </td>
        </tr>
        <tr>
          <th scope="row" id="modalLinkName">Link 2</td>
            <td>
              <a id="modalLinkURL">https://www.link2.com</a>
              <input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
            </td>
            <td>
              <a id="modalEditLink" href="#">icon
                                                <i class="fas fa-pen"></i>
                                            </a>
            </td>
        </tr>
        <tr>
          <th scope="row" id="modalLinkName">Link 3</td>
            <td>
              <a id="modalLinkURL">https://www.link3.com</a>
              <input id="modalLinkInput" type="hidden" class="form-control form-control-sm">
            </td>
            <td>
              <a id="modalEditLink" href="#">icon
                                                <i class="fas fa-pen"></i>
                                            </a>
            </td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

Answer 1

首先，您的HTML需要解决一些问题：

id属性值在HTML中必须唯一。使用类名代替当前您有重复项的位置。
您有<th>个以</td>关闭的开始标签

进行了这些更改后，您可以使用以下点击处理程序：

$(".modalEditLink").click(function () {
    if ($(this).find(".fa-pen").length) { // edit operation:
        var $a = $(this).closest("tr").find(".modalLinkURL");
        var $inp = $("<input>").addClass("editURL").val($a.text());
        $a.replaceWith($inp);
        $inp.focus();
        $(this).find(".fas").removeClass("fa-pen").addClass("fa-save");
    } else { // save operation:
        var $inp = $(this).closest("tr").find(".editURL");
        var $a = $("<a>").addClass("modalLinkURL").text($inp.val());
        $inp.replaceWith($a);
        $(this).find(".fas").removeClass("fa-save").addClass("fa-pen");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />

<table id="modalLinks" class="table table-hover">
  <thead align="left">
    <tr>
      <th scope="col">Name</th>
      <th scope="col-xs-4">URL</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody align="left">
    <tr>
        <td scope="row" class="modalLinkName">Link 1</td>
        <td>
          <a class="modalLinkURL">https://www.link1.com</a>
          <input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
        </td>
        <td>
          <a class="modalEditLink" href="#">icon
                                            <i class="fas fa-pen"></i>
                                        </a>
        </td>
    </tr>
    <tr>
        <td scope="row" class="modalLinkName">Link 2</td>
        <td>
          <a class="modalLinkURL">https://www.link2.com</a>
          <input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
        </td>
        <td>
          <a class="modalEditLink" href="#">icon
                                            <i class="fas fa-pen"></i>
                                        </a>
        </td>
    </tr>
    <tr>
        <td scope="row" class="modalLinkName">Link 3</td>
        <td>
          <a class="modalLinkURL">https://www.link3.com</a>
          <input class="modalLinkInput" type="hidden" class="form-control form-control-sm">
        </td>
        <td>
          <a class="modalEditLink" href="#">icon
                                            <i class="fas fa-pen"></i>
                                        </a>
        </td>
    </tr>
  </tbody>
</table>

jQuery：更改<a> to <input/> when clicking adjacent </a> <a> in

1 个答案: