如何使用jQuery向表发送数据？

我希望有人能回答我的问题：如何使用jQuery将输入到Agenda字段中的数据添加到表中。目前，表可以添加行，也可以删除行，但不会添加输入到表单字段中的数据。最后，我无法将“保存”按钮静态地放置在表的下方或上方。
HTML -格式1 -1：

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>João Augusto - Agenda jQuery</title>
  <meta charset="utf-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="estilos.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

</head>
<body>

<div class="p-5 text-black text-center bg-roxo">
  <h1 id="titulo">João Augusto</h1>
</div>

<div class="container mt-5">
    <div class="container">
        
        <h5>Agenda</h5>
        <form id="formulario">
            <div class="row py-2">
                <div class="col-1">
                    <label for="nome">Nome:</label>
                </div>
                <div class="col-5 ">
                    <input type="text" class="form-control" placeholder="Escrava o primeiro nome" name="nome">
                </div>
            </div>

            <div class="row py-2">
                <div class="col-1">
                    <label for="email">Email:</label>
                </div>
                <div class="col-5">
                    <input type="text" class="form-control" placeholder="email" name="email">
                </div>
                <div class="col-1">
                    <label for="cel">Celular:</label>
                </div>
                <div class="col-5">
                    <input type="text" class="form-control" placeholder="(XX)XXXX-XXXX" name="cel">
                </div>
            </div>

            <div class="row py-2">
                <div class="col-1">
                    <label for="insta">Instagram:</label>
                </div>
                <div class="col">
                    <input type="text" class="form-control" placeholder="Instagram" name="insta">
                </div>
                <div class="col-1">
                    <label for="face">Facebook:</label>
                </div>
                <div class="col">
                    <input type="text" class="form-control" placeholder="Facebook" name="face">
                </div>
            </div>
        </form>
    </div>

    <!-- Tabela que conterá os dados-->
    <div class="container mt-3">

        <table class="table table-striped" id="myTable">
            <tbody>
             <tr>
               <th>Nome</th>
               <th>Email</th>
               <th>Instagram</th>
               <th>Celular</th>
               <th>Facebook</th>
               <th>Excluir</th>
             </tr>
             <tr>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td>
                <button type="button" onclick="remove(this)" class="btn btn-danger btn-xs">Excluir</button>
               </td>
             </tr>
            </tbody>
            <tfoot>
             <tr>

                <button class='btn btn-danger excluir' onclick="AddTableRow()" type="button">Salvar</button>
               
            </tr>
            </tfoot>
            </table>

    </div>
</div>

<div class="mt-5 p-4 bg-dark text-white text-center">
  
</div>
<script src="functions.js"></script>
</body>
</html>

jQuery（JS）- * 函数.js*：

(function($) {
  AddTableRow = function() {

    var newRow = $("<tr>");
    var cols = "";

    cols += '<td>&nbsp;</td>';
    cols += '<td>&nbsp;</td>';
    cols += '<td>&nbsp;</td>';
    cols += '<td>&nbsp;</td>';
    cols += '<td>&nbsp;</td>';
    cols += '<td>';
    cols += '<button type="button" onclick="remove(this)" class="btn btn-danger btn-xs">Excluir</button>';
    cols += '</td>';

    newRow.append(cols);
    $("#myTable").append(newRow);

    return false;
  };
})(jQuery);

  
(function($) {
remove = function(item) {
  var tr = $(item).closest('tr');

  tr.fadeOut(400, function() {
    tr.remove();  
  });

  return false;
}
})(jQuery);

这是我的工作解决方案：

View this on codepen.io

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="functions.js"></script>

表单和表格，HTML：* （只需将此替换为您的表单和表格 *）

<form id="formulario">
        <div class="row align-items-center py-2">
            <div class="col-1">
                <label for="nome">Nome:</label>
            </div>
            <div class="col-5 ">
                <input type="text" class="form-control" placeholder="Escrava o primeiro nome" name="nome" value="JOÃO AUGUSTO">
            </div>
            <div class="col-1">
                <label for="email">Select:</label>
            </div>
            <div class="col-5">
                <select class="form-select" name="select">
                    <option value="">Not choosed</option>
                    <option value="Option1">Option1</option>
                    <option value="Option2">Option2</option>
                    <option value="Option3">Option3</option>
                    <option value="Option4">Option4</option>
                </select>
            </div>
        </div>
        <div class="row align-items-center py-2">
            <div class="col-1">
                <label for="email">Email:</label>
            </div>
            <div class="col-5">
                <input type="text" class="form-control" placeholder="email" name="email">
            </div>
            <div class="col-1">
                <label for="cel">Celular:</label>
            </div>
            <div class="col-5">
                <input type="text" class="form-control" placeholder="(XX)XXXX-XXXX" name="celular">
            </div>
        </div>
        <div class="row align-items-center py-2">
            <div class="col-1">
                <label for="insta">Instagram:</label>
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="Instagram" name="instagram">
            </div>
            <div class="col-1">
                <label for="face">Facebook:</label>
            </div>
            <div class="col">
                <input type="text" class="form-control" placeholder="Facebook" name="facebook">
            </div>
        </div>
</form>
    <div class="col-auto p-0 mt-3">
        <button class="btn btn-success" onclick="Functions.addToTable('formulario','myTable')" type="button">Salvar</button>
    </div>
</div>
<div class="container mt-3">
    <table class="table table-striped text-center table-bordered my-3" id="myTable">
        <tbody>

            <!-- IF EMPTY ROWS : 
            <tr id="emptyTr"><td><i>empty</i></td></tr>
            -->

            <!-- IF CONST ROWS : -->
            <tr id="tr_1">
                <td><i>name</i></td>
                <td><i>select</i></td>
                <td><i>email</i></td>
                <td><i>celular</i></td>
                <td><i>instagram</i></td>
                <td><i>facebook</i></td>
                <td>
                    <button onclick="Functions.removeFromTable('formulario','myTable',1)" type="button" class="btn btn-sm btn-danger btn-xs">
                        Excluir
                    </button>
                </td>
            </tr>
            <!---end Const Rows---->

        </tbody>
    </table>

functions.js：（只需替换所有这些内容，而不是您的functions.js）

//develope by: https://stackoverflow.com/users/3114914/
class Functions {
static trNumbers(tableId){
    var table = $('#'+tableId);
    var issetEmptyTr = table.find('tbody tr#emptyTr').length;
    if(issetEmptyTr==1)
        return 1;
    else
        return parseInt(table.find('tbody tr:last').attr('id').replace(/\D/g,''))+1;
}
static formData(formId){
    var map = new Map();
    var formInputLength = parseInt($('#'+formId+' input').length);
    var formSelectLength = parseInt($('#'+formId+' select').length);
    var formLength = formInputLength + formSelectLength;
    for(let i=0; i < formLength; i++)
    {
        var inpName = $('#'+formId+' input, #'+formId+' select').eq(i).attr('name')
        var inpVal = $('#'+formId+' input, #'+formId+' select').eq(i).val()
        var inpMap = map.set(''+inpName+'',''+inpVal+'');
    }
    return inpMap;
}
constructor(formId,tableId){

    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }
    var formData = Functions.formData(formId)
    var table = $('#'+tableId);
    table.prepend('<thead class="bg-light"><tr></tr></thead>')
    var th = '';
    var formDataKeys = formData.keys();
    for(let i=0; i<formData.size; i++){th+='<th>'+capitalizeFirstLetter(formDataKeys.next().value)+'</th>'}
    th += '<th>Excluir</th>';
    table.find('thead tr').html(th);
    table.find('tbody').find('#emptyTr td').attr('colspan',formData.size+1);

}
static addToTable(formId,tableId){
    var formData = Functions.formData(formId);
    var table = $('#'+tableId);
    var formDataKeys = formData.values();
    var td = '';
    var number = Functions.trNumbers(tableId);
   
    for(let i=0; i<formData.size; i++){td+='<td>'+formDataKeys.next().value+'</td>'}
    td += '<td><button onclick=Functions.removeFromTable("'+formId+'","'+tableId+'",'+number+') type="button" class="btn btn-sm btn-danger btn-xs">Excluir</button></td>';
    table.find('tbody').find('#emptyTr').remove()
    table.find('tbody').append('<tr id="tr_'+number+'">'+td+'</tr>')
    number++;

    //SEND and RECEIVE DATA here. for add your row data.
    //your MAP => formData. your MAP keys => formData.keys() and values => formData.values()

}
static removeFromTable(formId,tableId,rowId){

    var formData = Functions.formData(formId)
    var table = $('#'+tableId);
    var td = '<td colspan='+formData.size+1+'><i>empty</i></td>';
    $('#tr_'+rowId).remove()
    var trLength = $('tbody tr').length;
    if(trLength==0)
    {
        table.find('tbody').html('<tr id="emptyTr">'+td+'</tr>')
    }

    //for DELETE your row data, SEND and RECEIVE DATA here.
}
 
}
new Functions("formulario","myTable"); // "formulario" is your form id and "myTable" is your table id.

替换上面的两个，并保留其余代码不变。

它会自动将input/selectname=""的名称放入表header中。并将input/selectvalue=""放入自己的列中。它会正确考虑您的input/select的编号。请查看代码中的 * comment *。
您的表单ID是 “formulario”，您的表ID是 “myTable”。我没有更改它。

更改此ID：

转到function.js的最后一行并更改：
new Functions("your_new_form_id","your_new_table_id");
转到您的 Salvar 按钮和 Excluir 按钮onclick=""并更改ID：
x1米5英寸x1米6英寸
"祝你好运"
我的英语不好。对不起：）

如何使用jQuery向表发送数据？

1条答案

相关问题

热门标签

最新问答