2

s it possible to create dynamic TR and TD elements in an HTML table? Something similar but better than this:

jQuery(document).ready(function() {
  $('button[name="new-title"]').on('click', function(){
    var table = $('table[name="errortitle"]');
    var tr = $('<tr />');
    var td = $('<td />');
    var input = $('<input />').attr({'class' : 'form-control'})
    var button = $('<button />').attr({'class' : 'btn'});
    var checkbox = input.clone().attr({'type' : 'checkbox', 'name' : 'check'});

    var tdId = td.clone().html('-');
    var tdTitle = td.clone().append(input.addClass('formInput').attr({'type': 'text'}));
    var tdCheckBox = td.clone().append(checkbox);
    var tdAction = td.clone().html(button.addClass('btn-danger').html('Usuń'));

    tr.append(tdCheckBox);
    tr.append(tdId);
    tr.append(tdTitle);
    tr.append(tdAction);

    table.append(tr);
  });
});

Is it possible to make this code nicer or more efficient?

sebob
  • 515
  • 6
  • 14
  • possible duplicate of [Add table row in jQuery](http://stackoverflow.com/questions/171027/add-table-row-in-jquery) – Khamidulla Jan 08 '14 at 08:19
  • 1
    'Is it possible to nicer code? or more efficient?' - Possibly a question for http://codereview.stackexchange.com/? – George Jan 08 '14 at 08:22
  • I ask about professional example to do that code. How people write this simple code. – sebob Jan 08 '14 at 08:23
  • OGeez - ok, i Create question, http://codereview.stackexchange.com/questions/38816/jquery-dynamic-elements-like-tr-and-td-add-to-html-table – sebob Jan 08 '14 at 08:27

1 Answers1

2

You can use something like this:

var input = $('<input />').attr({'class' : 'form-control'})
var button = $('<button />').attr({'class' : 'btn'});
var checkbox = input.clone().attr({'type' : 'checkbox', 'name' : 'check'});


$("#tid").find('tbody').append($('<tr>').append($('<td>').append(input)).append($('<td>').append(button)).append($('<td>').append(checkbox)));

working fiddle

Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125