Question

我有一个动态创建的表名为＆＃34; jobTable＆＃34;基于一些文本输入和一个按钮，同时将数据保存到一个数组中。该表的每一行都包含一个按钮，用于删除整行并更新数组。每当用户尝试删除一行时，该行将被正确删除，但该数组将被完全刷新，并且我将丢失所有数据。我想这一定是因为所有动态生成的按钮共享相同的“id”＃39;因此按钮的选择器功能将被多次调用，但它在桌面上工作正常！为什么会这样？

var workExperience = [];
  $("#jobTable").on('click', '#DeleteRow', function () {
                    $removeditem = $(this).closest('tr').parent().index();
                    $(this).closest('tr').remove();
                    delData($removeditem);
                });

                function delData($x) {

                    workExperience.splice($x - 1, 1);
                    console.log(workExperience); //the array will be flushed in a few steps!
                }


$("#save").click( function () {

//Save the data into an array inorder to send it to the server later.
 workExperience.push($("#companyName").val());

//Append data into some table in order to make the user able to see or remove each row he/she enters

        $("#jobtable").append(
            "<tbody>" +
            "<tr>" +
            "<td>" +
            "<button type='button' id='DeleteRow'>"+
            "</td>" +
            "<td>" +
             $("#companyName").val() +
            "</td>" +
           "</tr>" +
            "</tbody>");
    });

Answer 1

我缺乏将此作为评论的声誉，但您能否提供一些有关HTML的更多信息？

或者，如果您不介意添加库。 Knockout.js可以解决这个问题。请参阅this tutorial。

Answer 2

我不确定您为什么要在两个地方存储数据并尝试维护点击删除按钮。创建具有相同ID的删除按钮也不是一个好主意。

我冒昧地将每个公司的数据存储到数据属性中。我已将字符串存储到＆＃34; data-workExp＆＃34;，但您几乎可以添加任何对象，如数组。以下是整个代码：

＆＃13;

    $(function () {
        $("#jobtable").on('click', '.DeleteRow', function () {
            $(this).parent().remove();
        });

        $('#toServer').click(function () {
            $('#serverData').html("");
            $('.CompanyRow').each(function () {
                $('#serverData').append("<div>" + $(this).data("workExp") + "</div>");
            });
        });

        $("#save").click(function () {
            $("#jobtable").append(
                $('<div>').addClass('CompanyRow').data('workExp', $("#companyName").val())
                    .html($("#companyName").val() + "<input type='button' class='DeleteRow' value='Delete Me'>")
            );
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
        <input id="companyName" type="text"><br />
        <input type="button" id="save" value="Save">
        <input type="button" id="toServer" value="Save to server!"/>
    </div>
    <div id="jobtable" >
    </div>

    <h1>Data goes to server</h1>
    <div id="serverData"></div>

＆＃13;

删除动态生成的表行

2 个答案: