-6

我有这个带有用户选项卡的小提琴。在用户选项卡中，有三个字段可以接受姓名、手机和电子邮件。当用户填写所有三个字段并点击添加按钮时，就会插入一行。现在我想做新的添加行可编辑。这意味着我想保留 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");
        }
4

2 回答 2

1

这个问题对于 OP 场景来说非常具体，所以我会尽量让答案更笼统。

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

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

1-添加

2- 编辑

3-删除

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

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

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

这是一个更新的演示：

JSFiddle >> 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>");
于 2013-11-06T13:52:14.707 回答
0

下面是一个示例函数，它不会做你需要的所有事情，但它显示了 jquery 函数以及如何做到这一点的一种可能性。我只启用了编辑名称字段和删除。您必须添加其他字段，+ 为输入复制 id 数据。

js小提琴

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();

    });
}
于 2013-11-06T12:43:11.347 回答