如何使用jQuery创建循环

Question

如何使用jQuery创建循环

3

我有这个HTML和JQuery.JS。脚本的工作方式是：当您按下“添加”按钮时，一个表单将出现在表格上方；当您按下“隐藏”按钮时，它将隐藏；当您按下“编辑”按钮时，在新的提交按钮创建的TR中会添加任何您在表单输入框中添加的文本。

现在我想做的是：在每个TD行上，我希望我的ADD/HIDE/Edit按钮重新出现，但这一次当我按下Edit时，我希望编辑新TR中的新文本。例如，我在第一个TR中有a、a、a、a、a，我按下Edit，我放入b、b、b、b、b，Submit它会创建一个新的TR并显示bbbbb。然后当我再次按下位于bbbbb tr上的Edit按钮时，我希望编辑bbbbb Line。我不知道如何更好地解释这个问题。如果你们想要的话，我可以通过skype联系。

$(document).ready(function () {
    $('#submit').on('click', function () {
        var valid = true,
            message = '';

        $('form input').each(function () {
            var $this = $(this);

            if (!$this.val()) {
                var inputName = $this.attr('name');
                valid = false;
                message += 'Please enter your ' + inputName + '\n';
            }
        });

        if (!valid) {
            alert(message);
        } else {
            $('table').append('' +
                '<tr>' +
                '<td>' + $('#btd1').val() + '</td>' +
                '<td>' + $('#btd2').val() + '</td>' +
                '<td>' + $('#btd3').val() + '</td>' +
                '<td>' + $('#btd4').val() + '</td>' +
                '<td>' + $('#btd5').val() + '</td>' +
                '</tr>' +
                '');
            for(var x = 1; x < $('input').length; x++) {
                $('#btd' + x ).val('');
            }
            $('.buttons').attr('rowspan', $('tr').length);
        }
    });

    $(".hide").click(function () {
        $("form").hide();
    });
    $(".add").click(function () {
        $("form").show();
    });

    $(".edit").click(function () {
        $("form").show();
        $.each($(this).parent().parent().find('td'), function (key, val) {
            $("form input[type=text]").eq(key).val($(val).text());
        })
    });

    $("#show").click(function () {
        //$("form").show();
        //$("#btd1").val("Vlad");
        //$("#btd2").val("Andrei");
        //$("#btd3").val("vTask");
        //  $("#btd4").val("Ceva");
        //$("#btd5").val("Alceva");
    });
});

<!DOCTYPE html>
<html >
  <head >
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title ></title >
  </head >
<body >
<form class="a" action="" method="post" hidden>
    <input type="text" name="nume" id="btd1" value="" >
    <input type="text" name="prenume" id="btd2" value="" >
    <input type="text" name="email" id="btd3" value="" >
    <input type="text" name="telefon" id="btd4" value="" >
    <input type="text" name="parola" id="btd5" value="" >
    <input type="button" id="submit" value="Submit" name="submit" />
</form >
<table border="2" >
    <tr >
        <td >Vlad</td >
        <td >Andrei</td >
        <td >vTask</td >
        <td >Ceva</td >
        <td >Alceva</td >
        <td class="buttons" style="vertical-align: top">
            <button class="add" >Add</button >
            <button class="hide" >Hide</button >
            <button class="edit" >Edit</button >
        </td >
    </tr >
</table >

</body >
</html >

Thanks for the help in advance

- Andrei Ref

1

已添加编辑以将本地jquery脚本引用替换为CDN。现在，当您运行代码片段时，它不会出现错误提示。 - DMcCallum83

很好。希望有人能够审核它。你提到你想让你的添加/隐藏/编辑按钮“重新出现”，但从我所看到的情况来看，它们实际上从未消失过。也许你应该在原始帖子中更新一个编号列表，详细说明预期行为或当前行为与预期行为之间的差异？ - DMcCallum83

我不希望它们消失，它们可以在每个新的TR上保持可见。 - Andrei Ref

我只想让“编辑”按钮编辑他所在的新列。 - Andrei Ref

我用a、a、a、a、a开始表格。当我点击编辑按钮时，a、a、a、a、a将出现在表单中。我将其编辑为b、b、b、b、b，并点击提交。一个新的TR将在起始行下创建，其中包含b、b、b、b、b，并且当我点击旁边b、b、b、b、b列的编辑按钮时，我希望b、b、b、b、b文本出现在表单中。我真的不擅长用语言表达这个问题。 - Andrei Ref

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- madalinivascu · Answer 1

我的罗马尼亚同胞，你需要这样的东西：

$(document).ready(function () {
    $('#submit').on('click', function () {
        var valid = true,
            message = '';

        $('form input').each(function () {
            var $this = $(this);

            if (!$this.val()) {
                var inputName = $this.attr('name');
                valid = false;
                message += 'Please enter your ' + inputName + '\n';
            }
        });

        if (!valid) {
            alert(message);
        } else {
            $('table').append('' +
                '<tr>' +
                '<td>' + $('#btd1').val() + '</td>' +
                '<td>' + $('#btd2').val() + '</td>' +
                '<td>' + $('#btd3').val() + '</td>' +
                '<td>' + $('#btd4').val() + '</td>' +
                '<td>' + $('#btd5').val() + '</td>' +
                '<td class="buttons" style="vertical-align: top"><button class="add" >Add</button><button class="hide" >Hide</button><button class="edit">Edit</button></td >'+
                '</tr>' +
                '');
            for(var x = 1; x < $('input').length; x++) {
                $('#btd' + x ).val('');
            }
        }
    });

    $("body").on('click','.hide',function () {
        $("form").hide();
    });
    $("body").on('click','.add',function () {
        $("form").show();
    });

    $("body").on('click','.edit',function () {
        $("form").show();
        $.each($(this).closest('tr').find('td:not(".buttons")'), function (key, val) {
            $("form input[type=text]").eq(key).val($(val).text());
        })
    });

    $("#show").click(function () {
        //$("form").show();
        //$("#btd1").val("Vlad");
        //$("#btd2").val("Andrei");
        //$("#btd3").val("vTask");
        //  $("#btd4").val("Ceva");
        //$("#btd5").val("Alceva");
    });
});

<!DOCTYPE html>
<html >
  <head >
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title ></title >
  </head >
<body >
<form class="a" action="" method="post" hidden>
    <input type="text" name="nume" id="btd1" value="" >
    <input type="text" name="prenume" id="btd2" value="" >
    <input type="text" name="email" id="btd3" value="" >
    <input type="text" name="telefon" id="btd4" value="" >
    <input type="text" name="parola" id="btd5" value="" >
    <input type="button" id="submit" value="Submit" name="submit" />
</form >
<table border="2" >
    <tr >
        <td >Vlad</td >
        <td >Andrei</td >
        <td >vTask</td >
        <td >Ceva</td >
        <td >Alceva</td >
        <td class="buttons">
            <button class="add" >Add</button >
            <button class="hide" >Hide</button >
            <button class="edit" >Edit</button >
        </td >
    </tr >
</table >

</body >
</html >