Question

我做了一个像这样的表格。当我点击修改按钮时，它会test@yahoo.com进入<input type="text" placeholder="test@yahoo.com">

            <fieldset class="shortfieldset">
                <div class="fieldsetTop">
                    <div class="fieldsetTop-left floatNone">
                        <h3>Login Details</h3>
                    </div>
                    <div class="fieldsetTop-right btn floatNone">
                        <a href=""> Edit </a>
                        <a href="#"> Save </a>
                    </div>
                </div>
                <p> Login ID bisa dipakai salah satu dibawah ini: </p>
                <form action="#" method="POST">
                   <label for="name"> Email </label>:
                   <span> test@yahoo.com </span> <br />
                   <label for="name"> HP </label>:
                   <span> 123123123 </span> <br />
                   <input type="submit" value="SUBMIT"> 
                </form>
            </fieldset>

我发现的是：

$(document).ready(function(){
    $(".loginDetails").click(function() {
        var input = $("<input>", {
            val: $(this).text(),
            type: "text" }
        );
        $(this).replaceWith(input);
        input.select();
    });
});

＆＃13;

$(document).ready(function() {
  $(".loginDetails").click(function() {
    var input = $("<input>", {
      val: $(this).text(),
      type: "text"
    });
    $(this).replaceWith(input);
    input.select();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<fieldset class="shortfieldset">
  <div class="fieldsetTop">
    <div class="fieldsetTop-left floatNone">
      <h3>Login Details</h3>
    </div>
    <div class="fieldsetTop-right btn floatNone">
      <a href=""> Edit </a>
      <a href="#"> Save </a>
    </div>
  </div>
  <p>Login ID bisa dipakai salah satu dibawah ini:</p>
  <form action="#" method="POST">
    <label for="name">Email</label>:
    <span> test@yahoo.com </span> 
    <br />
    <label for="name">HP</label>:
    <span> 123123123 </span> 
    <br />
    <input type="submit" value="SUBMIT">
  </form>
</fieldset>

＆＃13;

仅在我点击test@yahoo.com时才会生效，它会变为输入。但我想要的是当我点击编辑按钮时，所有值都将变为输入。并且当文本变为输入时，将显示提交按钮并且编辑按钮将消失。因为这将更新数据库。任何的想法？感谢

Answer 1

<fieldset class="shortfieldset">
                <div class="fieldsetTop">
                    <div class="fieldsetTop-left floatNone">
                        <h3>Login Details</h3>
                    </div>
                    <div class="fieldsetTop-right btn floatNone">
                        <a onclick="toInput($('#email'));toInput($('#hp'))" href=""> Edit </a>
                        <a href="#"> Save </a>
                    </div>
                </div>
                <p> Login ID bisa dipakai salah satu dibawah ini: </p>
                <label for="name"> Email </label>:
                <span id="email"> test@yahoo.com </span> <br />
                <label for="name"> HP </label>:
                <span id="hp"> 123123123 </span> <br />
            </fieldset>

Javascript代码：

function toInput(elem){
   var input = $("<input>", {
            val: elem.text(),
            type: "text" }
        );
        elem.replaceWith(input);
        input.select();
}

Answer 2

这里是解决方案为编辑超级链接添加类名

<a class="loginDetails">Edit</a>

之后使用您的脚本，它将按预期的方式工作，将显示一个输入框。这是jsfidle http://jsfiddle.net/psjvrk4y/

的链接

此致

Answer 3

这是你在找什么：http://jsfiddle.net/wegnetnn/

我使用的逻辑是，添加＆＃34; loginDetails＆＃34;要转换为输入字段的文本字段的类。将点击事件监听器添加到＆＃34;编辑＆＃34;链接以及每当用户点击它时，触发所有具有＆＃34; loginDetails＆＃34;的元素的click事件。类。

JS代码：

$(".loginDetails").click(function(e) {
        var input = $("<input>", {
            val: $(this).text(),
            type: "text" }
        );
        $(this).replaceWith(input);
});

$("#edit-record").click(function(e){
        e.preventDefault(); // used to prevent the default anchor link behavior
        $("span.loginDetails").trigger("click");
});

指定＆＃34;编辑记录＆＃34; id为＆＃34;编辑＆＃34;链接：

<a href="#" id='edit-record'> Edit </a>

希望它有所帮助。如有任何疑问，请通知我。

Answer 4

我认为你原本想要做的就是让你的＆＃34; span＆＃34;标签，这是你想要改变为＆＃34;输入＆＃34;字段，已经是＆＃34;输入＆＃34;字段，只是被禁用，而不是完全不同的标签。然后在您的编辑中单击所有您要在输入字段上切换disabled属性。

对于有效的锚标记，您始终需要＆＃34; href＆＃34;。我总是把＆＃34; javascript：void（0）;＆＃34;当我不想让href真正做任何事情时，而不是把它留空。

<fieldset class="shortfieldset">
            <div class="fieldsetTop">
                <div class="fieldsetTop-left floatNone">
                    <h3>Login Details</h3>
                </div>
                <div class="fieldsetTop-right btn floatNone">
                    <a href="javascript:void(0);" id="edit"> Edit </a>
                    <a href="javascript:void(0);" id="save> Save </a>
                </div>
            </div>
            <p> Login ID bisa dipakai salah satu dibawah ini: </p>
            <label for="email"> Email </label>:
            <input type="text" id="email" name="email" disabled value="text@yahoo.com" />
            <label for="name"> HP </label>:
            <input type="text" id="name" name="name" disabled value="123123123" />
        </fieldset>

CSS

input[disabled] {
         // style the text box like your span here
}
#save {
    display: none;
}

jquery的

$('#edit').click(function(e) {
    $(this).hide()
           .closest('fieldset')
           .find('input[type="text"]').attr('disabled', false);               

    $('#save').show();        
});

$('#save').click(function(e) {
    // do your save
    // once saved, hide btn
    $(this).hide();
});

修改

如果HTML5不可用，您必须将disabled属性更改为：

<input ...... disabled="disabled" .... />

单击按钮使文本<更改>进入<input /> </change>

4 个答案: