javascript - 单击按钮后使 HTML 元素可编辑并保存在数据库中

Question

我已经对此进行了一段时间的研究，但作为一名设计业余爱好者，我还没有真正了解它。在用户单击我创建的“编辑”按钮后，如何使我的以下标记可编辑。所以这里是:

<div class='wrapper'>
    <div class='topinfobar'>
    <p>Contact Info</p>
    </div>
    <table>
    <tbody>
    <tr><td><p class='leftspacing'>Cellphone Numbers</p></td><td><p>072 215 3372</p></td>
    <tr><td><p class='leftspacing'>Phone Numbers</p></td><td><p>011 310 9967</p></td>
    <tr><td><p class='leftspacing'>email address</p></td><td><p>s.nyama9@gmail.com</p></td>
    </tbody>
    </table>
    <button>Change</button>
</div>

我希望只需按下我创建的“编辑”按钮即可更改手机号码等。我正在使用 php，我只是出于设计目的做了那个标记。我希望按钮在用户仍在编辑其详细信息时从“更改”更改为“完成”。因此，信息仅在您单击“编辑”按钮之前可读，并且在用户单击它后变为“完成”

Answer 1

您可以将这些值放在输入中，但它看起来像使用 readonly 属性和 css 的常规内容，只需切换 class 和属性即可。

$('#edit').click(function(){
  $('#form').toggleClass('view');
  $('input').each(function(){
    var inp = $(this);
    if (inp.attr('readonly')) {
     inp.removeAttr('readonly');
    }
    else {
      inp.attr('readonly', 'readonly');
    }
  });
});

.view input {
  border:0;
  background:0;
  outline:none !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='topinfobar'>
        <p>Contact Info</p>
    </div>
    <table id="form" class="view">
        <tbody>
            <tr>
                <td>
                    <p class='leftspacing'>Cellphone Numbers</p>
                </td>
                <td>
                    <p><input type="text" value="072 215 3372" readonly/></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p class='leftspacing'>Phone Numbers</p>
                </td>
                <td>
                    <p><input type="text" value="011 310 9967" readonly/></p>
                </td>
            </tr>
            <tr>
                <td>
                    <p class='leftspacing'>email address</p>
                </td>
                <td>
                    <p><input type="email" value="s.nyama9@gmail.com" readonly/></p>
                </td>
            </tr>
        </tbody>
    </table>
    <button id="edit">Change</button>