获取表中的用户输入以发送到数据库

Question

I apologize if this is confusing, I am very new to coding.

I have an HTML web page with a table in javascript that pulls from a database in postgre. Right now, you can view the table and click on individual cells, but I want users to be able to overwrite any cell in the last column and for their input to be added to the database that the original table was pulled from.

Does anybody know how to do this?

Thank you: :)

var endpoint = '/reports/lead_time/endpoint' $(document).ready(function() {

$('#lead_time thead tr').clone(true).appendTo( '#lead_time thead' );
$('#lead_time thead tr:eq(1) th').each( function (i) {
    var title = $(this).text();
    $(this).html( '<input type="text" placeholder="'+title+'" />' );

    $( 'input', this ).on( 'keyup change', function () {
        if ( table.column(i).search() !== this.value ) {
            table.column(i).search( this.value ).draw();
        }
    } );
} );

var table = $('#lead_time').DataTable( {
    orderCellsTop: true,
    scrollY: "700px",
    scrollX: true,
    pageLength: 50,
    order: [[ 1, "asc" ]],
    processing: true,
    serverSide: true,
    search: "Quick Search...",
    dom: 'Blfrtip',
    keys: true,
    deferRender: true,
    scroller: true,
    infoFiltered: "(Filtered from _MAX_ total entries)",
    searching: true,
    language: {
        processing: "Processing...",
        search:"Quick Search:",
    },
    ajax: {
        "method":"GET",
        "url": endpoint,
        "serverSide": true,
    },
    buttons: [
        'columnsToggle'
    ],
    columns: [
        { data: 'part_no'},
        { data: "supplierid" },
        { data: "item_minimum" },
        { data: "item_q1" },
        { data: "item_median" },
        { data: "item_q3" },
        { data: "vendor_minimum" },
        { data: "vendor_q1" },
        { data: "vendor_median" },
        { data: "vendor_q3" },
        { data: "lead_time" },
        { data: "lt_type" },
        { data: "lt_override" },
    ],
} );

$('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();

    // Get the column API object
    var column = table.column( $(this).attr('data-column') );

    // Toggle the visibility
    column.visible( ! column.visible());
} );


$('#lead_time tbody').on( 'click', 'td', function () {
    console.log( table.cell( this ).data() );
} );

} );

Answer 1

There are several ways to do this. One way is to put the <table> inside a <form> so that you can submit it.