Question

你好我们有问题，

这是我的代码。当我点击编辑按钮（创建用户后）我希望用户插入输入和编辑用户。比点击按钮“düzenle”用户将改变。

这是我项目的最后一部分，但我不能这样做。谢谢你的所有答案。

var userList = [];

var config = {
    date: {
        day: "2-digit",
        year: "numeric",
        month: "long",
        hour: "numeric",
        minute: "2-digit"
    }
}

var generateGUID = () => {
    var s4 = () => {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

var generateRow = user => `<tr>
        <td>
        ${user.name}
        </td>
        <td>
        ${user.surname}
        </td>
        <td>
        ${user.email}
        </td>
        <td>
        ${user.username}
        </td>
        <td>
        ${user.createDate.toLocaleDateString("tr", config.date)}
        </td>
        <td>
            <button data-user="${user.id}" class="del">Del</button>
            <button data-user="${user.id}" class="edit">Edit</button>
        </td>
    </tr>`;



$("#button").click(() => {
    let user = {
        name: $('#name').val(),
        surname: $('#surname').val(),
        email: $('#email').val(),
        username: $('#username').val(),
        createDate: new Date(),
        id: generateGUID()
    };

    userList.push(user);

    let row = $(generateRow(user));

    $(row).find(".del").click(function () {
        if (window.confirm("Do you really want to delete?")) {
            $(row).remove();
        }
    });

    $(row).find(".edit").click(function () {
        $("#edit").show();
        $("#button").hide();
    });



    $('tbody').append(row);

});

Answer 1

你可以这样做

https://codepen.io/creativedev/pen/BVzJKR

var userList = [];

var config = {
    date: {
        day: "2-digit",
        year: "numeric",
        month: "long",
        hour: "numeric",
        minute: "2-digit"
    }
}

var generateGUID = () => {
    var s4 = () => {
        return Math.floor((1 + Math.random()) * 0x10000)
            .toString(16)
            .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}

var generateRow = user => `<tr data-info='${JSON.stringify(user)}' >
        <td>
        ${user.name}
        </td>
        <td>
        ${user.surname}
        </td>
        <td>
        ${user.email}
        </td>
        <td>
        ${user.username}
        </td>
        <td>
        ${user.createDate.toLocaleDateString("tr", config.date)}
        </td>
        <td>
            <button data-user="${user.id}" class="del">Del</button>
            <button data-user="${user.id}" class="edit">Edit</button>
        </td>
    </tr>`;



$("#button").click(() => {
    let user = {
        name: $('#name').val(),
        surname: $('#surname').val(),
        email: $('#email').val(),
        username: $('#username').val(),
        createDate: new Date(),
        id: generateGUID()
    };

    userList.push(user);

    let row = $(generateRow(user));

    $(row).find(".del").click(function () {
        if (window.confirm("Do you really want to delete?")) {
            $(row).remove();
        }
    });

    $(row).find(".edit").click(function () {
      console.log()
      var info = $(this).closest('tr').data('info');
      $('#name').val(info.name);
      $('#surname').val(info.surname);
      $('#email').val(info.email);
      $('#username').val(info.username);
      $('#password').val(info.password);
        $("#edit").show();
        $("#button").hide();
    });



    $('tbody').append(row);

});

Answer 2

让make每行变得可编辑你需要识别你想要允许编辑的'field / td'，在这段代码中我使用class来识别：

var generateRow = user => `<tr>
    <td class="txt">
    ${user.name}
    </td>
    <td class="txt">
    ${user.surname}
    </td>
    <td class="txt">
    ${user.email}
    </td>
    <td class="txt">
    ${user.username}
    </td>
    <td >
    ${user.createDate.toLocaleDateString("tr", config.date)}
    </td>
    <td>
        <button data-user="${user.id}" class="del">Del</button>
        <button data-user="${user.id}" class="edit">Edit</button>
    </td>
</tr>`;

在确定允许编辑哪个'field / td'后，我会使用以下代码进行编辑：

var activeEditedRow;
$(row).find(".edit").click(function () {
    activeEditedRow = row;
  $(row).find('td').each (function() {
    if($(this).hasClass("txt")){
      myVal = $(this).html();
      $(this).html('<input type="text" value='+myVal+'>')
      }
  });  
    $("#edit").show();
    $("#button").hide();
});

$('#edit').click(function(){      
  $(activeEditedRow).find('td').each(function() {
      myVal = $(this).find('input').val();          
      $(this).html(myVal);
  });          
})

希望有所帮助......

当我用jquery点击按钮时，我想在输入中编辑用户

2 个答案: