javascript - Get user input in table to send to database

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

} );

标签： javascriptdatabasehtml-tableuser-input

Answer 1

有几种方法可以做到这一点。一种方法是放在<table>里面 a<form>以便您可以提交它。