检查此代码

Question

我正在尝试为我的Table Rows创建一个更新按钮。我的添加按钮打开表单输入字段，我的隐藏按钮隐藏它，编辑按钮编辑表TR字段。

提交按钮使用我放在字段中的新文本创建一个新TR。除了Submit one之外，我还想要一个Update Button。当我编辑TR Raw并在其中添加其他内容时。当我按更新来更改TR文本。

帮我解决这个问题。

这是我当前的HTML / Jquery.js脚本

＆＃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">
            <button class="add" >Add</button >
            <button class="hide" >Hide</button >
            <button class="edit" >Edit</button >
        </td >
    </tr >
</table >

</body >
</html >

＆＃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>' +
                '<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");
    });
});

＆＃13;

Answer 1

检查此代码

为什么不添加其他字段进行保存和编辑

    <!DOCTYPE html>
<html >
  <head >
<script src="https://code.jquery.com/jquery-3.1.0.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" />
  <input type="button" id="save" value="Save" style="display:none;" name="save" />
</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 >
        </td >
    </tr >
</table >

</body >
</html >

Javascript代码

    $(document).ready(function(){
  $(".add").on("click",function(){
    $(".a").show();
  });
  $(".hide").on("click",function(){
    $(".a").hide();
  });
  $(document).on("click",".editEle",function(){
    row = $(this).parents("tr")
    var field1 = row.find("td:nth-child(1)").html();
    var field2 = row.find("td:nth-child(2)").html();
    var field3 = row.find("td:nth-child(3)").html();
    var field4 = row.find("td:nth-child(4)").html();
    var field5 = row.find("td:nth-child(5)").html();

    update(field1,field2,field3,field4,field5);

  });

  var update = function(field1,field2,field3,field4,field5){
    $("#btd1").val(field1);
    $("#btd2").val(field2);
    $("#btd3").val(field3);
    $("#btd4").val(field4);
    $("#btd5").val(field5);
    $("#submit").hide();
    $("#save").show();
  };

  $("#save").on("click",function(){
    var val1 = $("#btd1").val();
    var val2 = $("#btd2").val();
    var val3 = $("#btd3").val();
    var val4 = $("#btd4").val();
    var val5 = $("#btd5").val();
    row.find("td:nth-child(1)").html(val1);
    row.find("td:nth-child(2)").html(val2);
    row.find("td:nth-child(3)").html(val3);
    row.find("td:nth-child(4)").html(val4);
    row.find("td:nth-child(5)").html(val5);

  });


  $("#submit").on("click",function(){
    var val1 = $("#btd1").val();
    var val2 = $("#btd2").val();
    var val3 = $("#btd3").val();
    var val4 = $("#btd4").val();
    var val5 = $("#btd5").val();
    var ele = "<tr><td>"+val1+"</td><td>"+val2+"</td><td>"+val3+"</td><td>"+val4+"</td><td>"+val5+"</td><td><button class='editEle'>Edit</button></tr>";
    $("table").append(ele);

  });



});

更新表jquery

1 个答案:

检查此代码