如何为每个提交的数据创建动态引导卡？

Question

如何为每个提交的数据创建动态引导卡。在提交表单时，将创建一张卡片，并且对于每张卡片将创建的每个数据，数据都将存储在卡片中。我希望存储在卡片中的数据将在列中，如静态标题示例名称、性别等。

谁能帮我找到这个解决方案....？

  $(document).ready(function() {
    
        $("#button").click(function(e){
            e.preventDefault();
           var name = $('#name').val();
           var gender = $('input:radio[name=sex]:checked').val();
           var resident= $('input:checkbox:checked').val();
           var education = $("#selectbox").val();
    
           var content = '<td>' + name + '</td>' +
                         '<td>' + gender + '</td>' +
                         '<td>' + resident + '</td>' +
                         '<td>' + education + '</td>' +
                '<td><button class="edit-row">Edit</button><button class="delete-row">Delete</button></td>';
              
            if ($(this).hasClass('save-edit')) {
                $('.editing').html(content);
                $("#button").removeClass('save-edit').val('Submit');
            } else {
                var rowContent = '<tr class="employee-row">' + content + '</tr>';
                $('#empinfo').append(rowContent);
            }
        });
        
        $('body').on('click', '.edit-row', function (e) {
            $('.editing').removeClass('editing');
            $(this).closest('.employee-row').addClass('editing');
            $("#button").addClass('save-edit').val('Save');
        });
        
        $('body').on('click', '.delete-row', function (e) {
            $(this).closest('.employee-row').remove();
        });
    });         

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<form>
Name: <input type="text" id="name" value=""></input></br>
Gender : <input type="radio" name="sex" value="male">M &nbsp;&nbsp
    <input type="radio" name="sex" value="female">F</br>

Resident: <input type="checkbox" name="resident" value="Yes">Yes &nbsp;&nbsp
      <input type="checkbox" name="resident" value="No">No
</br>
Edu : <select name="selectbox" id="selectbox">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</br>
<input type="submit" id="button" class="add" value="Submit">
</form>
<div width="400" class="card w-100" id="empinfo" cellpadding="2" cellspacing="2"> 
  <div class="row">
    <div class="col-2">Name</div>
    <div class="col-2">Gender</div>
    <div class="col-2">Resident</div>
    <div class="col-2">Edu</div>
    <div class="col-2">Action</div>
  </div>
</div>

Answer 1

希望对您有所帮助。只需将 Javascript 中的 td 标签更改为 div 标签，如下所示

    $("#button").click(function(e){
        e.preventDefault();
       var name = $('#name').val();
       var gender = $('input:radio[name=sex]:checked').val();
       var resident= $('input:checkbox:checked').val();
       var education = $("#selectbox").val();

       var content = 
           
           '<div class="col-2">' + name + '</div>' +
                     '<div class="col-2">' + gender + '</div>' +
                     '<div class="col-2">'+ resident + '</div>' +
                     '<div class="col-2">' + education + '</div>' +
            '<div class="col-2"><button class="edit-row">Edit</button><button class="delete-row">Delete</button></div>';
          
        if ($(this).hasClass('save-edit')) {
            $('.editing').html(content);
            $("#button").removeClass('save-edit').val('Submit');
        } else {
            var rowContent = '<div class="employee-row row">' + content + '</div>';
            $('#empinfo').append(rowContent);
        }
    });
    
    $('body').on('click', '.edit-row', function (e) {
        $('.editing').removeClass('editing');
        $(this).closest('.employee-row').addClass('editing');
        $("#button").addClass('save-edit').val('Save');
    });
    
    $('body').on('click', '.delete-row', function (e) {
        $(this).closest('.employee-row').remove();
    });   

https://codepen.io/thanaphon-saeteng/pen/bGpyvee