Question

我有这个fiddle有用户标签。在用户标签中，有三个字段接受姓名，手机和电子邮件。当用户填写所有三个并点击添加按钮时，会插入一行。现在我想让新添加的行可编辑。这意味着我想保持2个引导按钮编辑和删除。如果按下删除，则整个行将被删除，如果按下编辑，则整个将在用户可编辑可以更改手机号码，姓名和电子邮件。可以告诉我怎么办。这个js代码添加了新行

$('#btn1').click(function () {
        if ($(".span4").val() != "") {
            $("#mytable").append('<tr id="mytr' + val + '"></tr>');
            $tr=$("#mytr" + val);
            $tr.append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr' + val + '" unchecked ></td>');
            $(".span4").each(function () {
                $tr.append("<td >" + $(this).val() + "</td>");
            });
            var arr={};
            name=($tr.find('td:eq(1)').text());
            email=($tr.find('td:eq(2)').text());
            mobile=($tr.find('td:eq(3)').text());
            arr['name']=name;arr['email']=email;arr['mobile']=mobile;
            obj[val]=arr;
            val++;
        } else {
            alert("please fill the form completely");
        }

Answer 1

这个问题对OP场景非常具体，所以我会尝试让答案更加通用。

我不是这里的专家，但似乎你已经捕获了用户的输入并在他们点击Add to a new td时克隆了它。因此，根据我的理解，您需要编辑/删除新创建的td中的数据。

我们有一个包含多个字段的表。我们想对它们应用以下操作

1-添加

2-编辑

3-删除

也许这不是最好的做法，简而言之，我的方法是为每个数据值插入两个跨度：

一个隐藏的，包含输入文本字段（inputSpan）。
另一个只包含纯文本值（dataSpan）。

每当您想要编辑时，dataSpan（只是一个数据容器）将会消失，并且inputSpan（文本输入字段）会出现，而您可以编辑文本字段。编辑并单击“保存”后，将克隆文本字段中的数据以替换dataSpan中的数据。所以基本上dataSpan只是对inputSpan文本字段的反映。

这是一个更新的演示：

JSFiddle＆gt;＆gt; FullView Fiddle

我建议出于可读性目的，将代码分解为小函数，它会让生活更轻松，只需说。所以这是你的想法的一般逻辑：

   deleteRow = function (trID) {
        // delete code goes here, remove the row
        $(trID).remove();
    }

manageEdit = function (tdNo) {
    if ($("#edit-btn" + tdNo).html() === "Edit") { 
        $("#save-btn" + tdNo).show();//show save button
        $("#edit-btn" + tdNo).html("Cancel");//change edit to cancle
        editRow(tdNo);//call edit function
    } else if ($("#edit-btn" + tdNo).html() === "Cancel") { 
        $("#save-btn" + tdNo).hide();//hide save button
        $("#edit-btn" + tdNo).html("Edit");//change back edit button to edit
        cancelEditRow(tdNo);
    }
}

editRow = function (tdNo) {
    $(".inputSpan" + tdNo).show();//show text input fields
    $(".dataSpan" + tdNo).hide();//hide data display
}

cancelEditRow = function (tdNo) { 
    //looop thru 3 input fields by id last digit
    for (var i = 0; i < 3; i++) {
        //get input span that contain the text field
        var inputSpan = $("#inputSpan" + tdNo + "-" + i);
        //get the data span that contain the display data
        var dataSpan = $("#dataSpan" + tdNo + "-" + i);
        //text field inside inputSpan
        var textField = inputSpan.find('input:text');
        inputSpan.hide();//hide input span
        textField.val(dataSpan.html());//take original data from display span and put it inside text field to cncle changes. 
        dataSpan.show();//show data span instead of edit field
    }
}

saveRow = function (tdNo) { 
    //same as edit, but we reverse the data selection. 
    for (var i = 0; i < 3; i++) {
        var inputSpan = $("#inputSpan" + tdNo + "-" + i);
        var dataSpan = $("#dataSpan" + tdNo + "-" + i);
        var textField = inputSpan.find('input:text');
        inputSpan.hide();
        dataSpan.html(textField.val());//take data from text field and put into dataSpan
        dataSpan.show();

    }
    $("#edit-btn" + tdNo).html("Edit");//change text to edit
    $("#save-btn" + tdNo).hide();//hide same button. 
}

我在这里添加跨度：

     var tdCounter = 0;             
      $(".span4").each(function () { 
           var tid =  val+"-"+tdCounter;  
          $tr.append("<td id='#mytd"+tid+"'>
<span id='inputSpan"+tid+"' class='inputSpan"+val+"' style='display:none'>
<input type='text' id='#input"+tid+"' value='"+ $(this).val() + "' /></span>
<span id='dataSpan"+tid+"'  class='dataSpan"+val+"'>"+$(this).val()+"</td>");               
          tdCounter++;              
                });

这里我只是附加按钮来调用函数，每个按钮都适用于它自己的行：

   $tr.append("<td><botton id='edit-btn" + val + "' class='btn' onclick=manageEdit('" + val + "');>Edit</botton></td>");
   $tr.append("<td><botton style='display:none' id='save-btn" + val + "' class='btn' onclick=saveRow('" + val + "');>Save</botton></td>");
   $tr.append("<td><botton id='delete-btn" + val + "' class='btn' onclick=deleteRow('" + trID + "');>Delete</botton></td>");

Answer 2

下面是一个示例函数，它不会做你需要的每一个，但它显示了jquery函数和一个可能的方法。我只启用了编辑名称字段，并删除了。您必须添加其他字段，+复制输入的ID数据。

js Fiddle

window.deleteRow = function (tar) {
    $(tar).parent().remove();
}
window.editRow = function (tar) {
    var row = $(tar).parent(),
        cells, name;
    cells = row.find("td");
    name = $(cells.get(1)).text();
    $(cells.get(1)).text('');
    $(cells.get(1)).append('<input type="text" value="' + name + '">');
}

window.saveData = function() {
    var data = {};
    data.name = "some name";//get this from your input
    data.email= "some email";//get this from your input
    data.phone= "some phone";//get this from your input

    $.get("http://yourphpsite.com", data, function(data, status) {
         //data contains your server response
         if (data.somepositiveservermessage) {
             $("#user_notification_field").text("data saved");
             $("#user_notification_field").show();

    });
}

如何使输入字段可编辑？

2 个答案: