Breaking News: Grepper is joining You.com. Read the official announcement!

datatable edit row

Add Answer

YOU.com answered on March 18, 2021 Popularity 8/10 Helpfulness 1/10

answer datatable edit row

related datatables modify rows

related edit data in datatable

related datatable editable row update other cell

datatable edit row

Comment

// Assume you have an HTML table with the id "myTable"
// Each row may have an "edit" button to initiate editing

$(document).ready(function() {
  // Bind click event to all "edit" buttons in the table
  $('#myTable').on('click', '.edit-row', function() {
    // Get reference to the current row
    var currentRow = $(this).closest('tr');

    // Extract values from the row cells, assuming each cell has a "data-*" attribute to identify the field
    var column1Value = currentRow.find('[data-column="column1"]').text();
    var column2Value = currentRow.find('[data-column="column2"]').text();
    // ... and so on for other columns

    // Example of opening a modal or a form for editing the data
    openEditForm(column1Value, column2Value);
  });

  // Function to handle opening/editing the row data
  function openEditForm(column1Value, column2Value) {
    // Your implementation here, which could be opening a modal or a form
    // with fields pre-populated with the row's data, allowing the user to edit it
    console.log('Edit form opened with column values:', column1Value, column2Value);
  }
});

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Closely Related Answers

datatables modify rows

Comment

const table = $("#tableId").DataTable();

table.rows().every( function() {
	const node = this.node(); // html node -- tr
  	const row = $(node).find('td:eq(2)'); // 3rd (0-index) column -- td
}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: datatables d

Link to this answer
Share Copy Link

Contributed on Mar 18 2021

Chris PA

0 Answers Avg Quality 2/10

edit data in datatable

Comment

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var editor; // use a global for the submit and return data rendering in the examples
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Position:",
                name: "position"
            }, {
                label: "Office:",
                name: "office"
            }, {
                label: "Extension:",
                name: "extn"
            }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
            }, {
                label: "Salary:",
                name: "salary"
            }
        ]
    } );
 
    // Activate an inline edit on click of a table cell
    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );
 
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/staff.php",
        order: [[ 1, 'asc' ]],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

Popularity 10/10 Helpfulness 1/10 Language whatever

Source: editor.datatables.net

Tags: datatable data

Link to this answer
Share Copy Link

Contributed on Jul 27 2022

Graceful Gecko

0 Answers Avg Quality 2/10

datatable editable row update other cell

Comment

kljkljkj

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: cell datatable javascript row

Link to this answer
Share Copy Link

Contributed on Mar 31 2022

Gorgeous Gnu

0 Answers Avg Quality 2/10

datatable edit row

Contents

More Related Answers

datatable edit row

Closely Related Answers

datatables modify rows

edit data in datatable

datatable editable row update other cell

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.