CODEWITHSUNDEEP
javascriptjqueryhtml
Nazár Atamaníuk
Nazár Atamaníuk

Reputation: 51

Editable table on jQuery with inputs and selects

I am trying to do editable table on jQuery. I did it with inputs inside at the moment and button with action on click I am opening inputs and user put data there, but the problem that I can't make this table sortable with tablesorter plugin, so I think that I have to create inputs on click edit button, and then convert data from inputs in td's, but how to do it with selects?

I need something like this http://jsfiddle.net/y3tmrns9/1/

$(".edit").on("click", "td:not(.active)", function () {    
    $("label").html("td click<br />" + $("label").html());
    var $this = $(this);
    var $textbox = $("<input>", { type: "text", size: 5, value: $this.addClass("active").text() });
    $this.html($textbox);
    $textbox.focus();    
});

$("table").on("blur", "input:text", function () {        
    $("label").html("input blur<br />" + $("label").html());
    var $this = $(this);
    $this.parent().removeClass("active").text($this.val());
});

But how to make it editable only when I click on button? And also how to put select?

Upvotes: 0

Views: 765

Answers (2)

Naz&#225;r Ataman&#237;uk
Naz&#225;r Ataman&#237;uk

Reputation: 51

I found this plugin http://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/ Maybe for someone it will help!

Upvotes: 1

Vitaliy Terziev
Vitaliy Terziev

Reputation: 6671

do yourself a favour and use ready framework like - > http://demos.telerik.com/kendo-ui/grid/index. Invest time in search for the right tool instead of creating your own not working or even worse with hidden bugs

Upvotes: 0

Related Questions