footable add new row

Question

how to add new Row in a table using footable? without using a model popup. create a string to row draw.

Rajanikant Hawaldar · Answer

Hi Ashwin, check the below code and let me know the issue is solved or not $(document).ready( function () { var columns_name = [ 'id' , 'first name' , 'last name' , 'job title' ], columns = [], rows = [{ 'id' : 1, 'first_name' : 'Dennise' , 'last_name' : 'Fuhrman' , 'job_title' : 'High School History Teacher' }]; /** Creating a new object with the help of columns_name array with having key title and name and then pushing it to the columns array. We'll pass that array in the footable init object. */ for ( var i = 0; i var column = columns_name[i]; /** In name key replacing spaces with underscore so that it will match with the keys in row array of object */ columns.push({ title: column, name: column.replace(/ /g, "_" ) }); } var ft_init_options = { columns: columns, rows: rows, editing: { enabled: true , alwaysShow: true , allowAdd: true , allowEdit: false , addRow: function () { /** Creating new row with empty columns having input field */ var values = { 'id' : ' ' , 'first_name' : ' ' , 'last_name' : ' ' , 'job_title' : ' ' } ft.rows.add(values); }, deleteRow: function (row) { if (confirm( 'Are you sure you want to delete the row?' )) { row. delete (); } } } }; var ft = FooTable.init( '#editing-example' , ft_init_options); }); "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel= "stylesheet" /> "https://fooplugins.github.io/FooTable/compiled/footable.bootstrap.min.css" rel= "stylesheet" /> "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" > "https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.js" > class = "container-fluid" > class = "text-center" > FooTable Editing Example with inputs in row "editing-example" class = "table" > Thanks

Sivakumar Koneti · Answer

Hello Ashwin, Read once https://jsfiddle.net/prashantpokhriyal/da13nsdz/

footable add new row

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)