Dynamische jQuery-Elemente wie TR und TD werden der HTML-Tabelle hinzugefügt

96913
sebob

Kann man dynamische TR- und TD-Elemente in einer HTML-Tabelle erstellen? Etwas ähnliches aber besser als dieses:

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);
  });
});

Kann man diesen Code schöner oder effizienter gestalten?

Antworten
7
Ein alternativer Weg sollte AngularJS sein. Sie können einen Standard-HTML-Code definieren und einen Repeater in diesen Code einbinden. Weitere Informationen: [AngularJS: ngRepeat] (http://docs.angularjs.org/api/ng.directive:ngRepeat) Mephisto07 vor 6 Jahren 0
Sie können `insertRow` und` insertCell` verwenden. sehr einfach für 'tr' und 'td'. Alireza mohagheghi vor 2 Jahren 0

1 Antwort auf die Frage

8
George

You could create a function that will add a row to the table based on the number of elements of data you pass to it (which will become columns):

function newRow($table,cols){
    $row = $('<tr/>');
    for(i=0; i<cols.length; i++){
        $col = $('<td/>').append(cols[i]);
        $row.append($col);
    }
    $table.append($row);
}

You can then call this function for every new row you want to make. $table expects a jQuery object, cols expects an array of elements (DOM or jQuery) to append to the row. I've also tidied up the jQuery that creates your elements. Did you know you can use the second parameter in the jQuery function to set element properties?:

jQuery(document).ready(function() {
  $('button[name="new-title"]').on('click', function(){
    var table = $('table[name="errortitle"]');

    var tdId = '-';
    var tdTitle = $('<input />', {'class' : 'form-control formInput', 'type': 'text'});
    var tdCheckBox = $('<input />', {'class' : 'form-control', 'type' : 'checkbox', 'name' : 'check'});
    var tdAction = $('<button />', {'class' : 'btn btn-danger', html:'Usuń'});

    newRow(table,[tdCheckBox,tdId,tdTitle,tdAction]);
  });
});

JSFiddle

Try it with any amount of column data:

newRow(table,[tdCheckBox,tdId,tdTitle,tdAction,'another col','and another','a final col']);

JSFiddle