add new row

[roydekleijn]

Nice feature will be to be able to add a new row/record .

Please let me know how I can help you on this

[warrenAR]

I want that too. This is how I did for now.

Assuming the table is: <table class="table table-striped table-bordered" id="example5"> <thead> <tr> <th>#</th> <th>Nickname</th> <th>Firstname</th> <th>Lastname</th> </thead> <tbody> <tr data-id="1"> <td class="tabledit-data">1</td> <td class="tabledit-data">markcell</td> <td class="tabledit-data">Celso</td> <td class="tabledit-data">Marques</td> </tr> <tr data-id="2"> <td class="tabledit-data">2</td> <td class="tabledit-data">dotz</td> <td class="tabledit-data">Márcio</td> <td class="tabledit-data">Quental</td> </tr> <tr data-id="3"> <td class="tabledit-data">3</td> <td class="tabledit-data">zikospeed</td> <td class="tabledit-data">António</td> <td class="tabledit-data">Figueiredo</td> </tr> </tbody> </table>

I added a button <button id="addRow">Add Row</button>

And then add the new row with: $("#addRow").click(function() { var tableditTableName = '#example5'; var newID = parseInt($(tableditTableName + " tr:last").attr("data-id")) + 1; var clone = $("table tr:last").clone(); $(".tabledit-data span", clone).text(""); $(".tabledit-data input", clone).val(""); clone.appendTo("table"); $(tableditTableName + " tr:last").attr("data-id", newID); $(tableditTableName + " tr:last td .tabledit-span.tabledit-identifier").text(newID); $(tableditTableName + " tr:last td .tabledit-input.tabledit-identifier").val(newID); });

Apologies for the formatting - this is my first post on GitHub and I don't know what I'm doing wrong!

[klaujesi]

Wow .. perfect, it's works like a charm!. Thank you for this

[jianyuanzh]

Hi @klaujesi , I have a question. How can I make the newly added record under edit status?

[romanribes]

Hi, i did some modifications for @warrenAR code for current version of jquery-tabledit:

$("#button_add_row").click(function() { 
	var tableditTableName = '#example1';  // Identifier of table
	var newID = parseInt($(tableditTableName + " tr:last").attr("id")) + 1; 
	var clone = $("table tr:last").clone(); 
	$(".tabledit-span", clone).text(""); 
	$(".tabledit-input", clone).val(""); 
	clone.prependTo("table"); 
	$(tableditTableName + " tbody tr:first").attr("id", newID); 
	$(tableditTableName + " tbody tr:first td .tabledit-span.tabledit-identifier").text(newID); 
	$(tableditTableName + " tbody tr:first td .tabledit-input.tabledit-identifier").val(newID); 
	$(tableditTableName + " tbody tr:first td:last .tabledit-edit-button").trigger("click"); 
});

Note the last line force to show in edit mode.

[rcrdo520]

Can someone tell me, how to insert my "new row data" to the database ?

[cahpalencia]

I just made a few changes to implement add button, https://pastebin.com/nQ1FUgfk

[rcrdo520]

@cahpalencia Thank you so much! Finally i was able to extend the example.php with an add button. My Example.php:

https://pastebin.com/PGCsfgwH

[jonetiz]

@cahpalencia Thank you but is there a way I can just move the button to be under the table?

[jonfranz24]

Thanks for the version with the add function. However when I attempt to use it for some reason the edit is now sending an add action upon save vs the non-modified script that sends an edit action. Does anyone know the best way to resolve this without potentially breaking other functionality?

[dwhyte4]

@cahpalencia Thank you so much! Finally i was able to extend the example.php with an add button. My Example.php:

https://pastebin.com/PGCsfgwH

I tried using it but I was unable to work. It did not show an add button. any help towards resolving it would be appreciated

[dwhyte4]

Contributions.zip that is my file

[ABCarnage]

I just made a few changes to implement add button, https://pastebin.com/nQ1FUgfk

I am actively optimizing your file @cahpalencia. I have resolved some issues described above. When I have the time, I will fork this repo and update it. Cheers. @jonfranz24 @jonnyetiz

[luisestebancastillo]

I just made a few changes to implement add button, https://pastebin.com/nQ1FUgfk

I am actively optimizing your file @cahpalencia. I have resolved some issues described above. When I have the time, I will fork this repo and update it. Cheers. @jonfranz24 @jonnyetiz

@ABCarnage Im waiting for the solution about the reply of @jonnyetiz

[PicchiKevin]

Any update ? If help is needed I'm available.

[cahpalencia]

Thanks for the version with the add function. However when I attempt to use it for some reason the edit is now sending an add action upon save vs the non-modified script that sends an edit action. Does anyone know the best way to resolve this without potentially breaking other functionality?

This is not a final version, its just an idea, Edit and Add send edit action so I validate if the id exists.

[Brian-Salvati]

@rcrdo520 I know you were working on this a while ago but how did you get the 'action' to equal 'add'? I implemented all the code but when I click the add button and fill out the row data, developer tools shows that 'action' is being set to 'edit' and in turn won't run my php/sql command.

any advice would be great! thanks!

[ABCarnage]

Good news, I am finally working on it. I am in the process of simplifiying it (a version I made for a project with some extra features) and making an example page for it; I added a add row button, works with bootstrap 4 and font awesome .... Follow my fork for an update in the next following days. In v2-dev branch, I guess: https://github.com/ABCarnage/jquery-tabledit/tree/v2-dev

[ABCarnage]

See here, my edit for add-button. Use a PHP server to it. Commit: https://github.com/ABCarnage/jquery-tabledit/commit/e958873035b3a91f5fc65eb03bb6b372b484b8ff

[jmwebguy]

@ABCarnage In looking at your v2 version, I am trying to see how it matches the original version. You don't have any calls to a db connection, and I don't see where it's obvious file changes/naming. Do you think you can assist me with this?

[brajbaj]

See here, my edit for add-button. Use a PHP server to it. Commit: ABCarnage@e958873

Can you send php example. I have a problem with recognizing the ID

[mquevedob]

hello,

in line 452: $(td).find('.tabledit-delete-button').addClass('active');

should it be

$(td).find('.tabledit-confirm-button').addClass('active');

?

[mquevedob]

also, in line 443: $(td).parent('tr').remove();

I think it should not be removed yet, since there can be an error from the php script

[mquevedob]

same goes for line 280

this whole section should be called in the ajax function

$(td).each(function() { // Get input element. var $input = $(this).find('.tabledit-input'); // Set span text with input/select new value. if ($input.is('select')) { $(this).find('.tabledit-span').text($input.find('option:selected').text()); } else { $(this).find('.tabledit-span').text($input.val()); } // Change to view mode. Mode.view(this); });