Question

我有这个HTML +这个JQuery.JS 脚本就是这样的。当您按下添加按钮时，表格将显示在表格上方，当您按下隐藏按钮时它将隐藏它当您按下编辑按钮时，您将在表单输入案例中添加的任何文本将被添加到新的TR中使用“提交”按钮创建。

我现在想做的是。在每条TD线上，我希望我的ADD / HIDE / Edit按钮重新出现，但是这次我按下Edit。我想编辑新TR中的新文本。例如，我在第一个TR a，a，a，a，a按下编辑我把b，b，b，b，b，提交它将使用bbbbb创建一个新TR，当我按下Edit按钮时再次，这是在bbbbb tr。我想要它来编辑bbbbb线。我不知道怎么解释它比这更好。如果你们想要idk，我可以通过Skype获得。

＆＃13;

$(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");
    });
});

＆＃13;

<!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 >

＆＃13;

感谢您的帮助

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 >

如何创建循环Jquery

1 个答案: