Dynamische Auswahlbox in Tabelle reinbauen

[Rolf B]

Hallo hmm,

du musst die Options nicht von Hand hinzufügen. Du kannst das auch direkt ins HTML reinsetzen.

Und wenn Du dieses manuelle Templating beschissen findest - dann gebe ich Dir augenblicklich recht. Abgesehen von Template-Libraries kannst Du auch die Template-Strings aus ECMAScript 2015 verwenden, verlierst dann aber den Support für den Internet Explorer.

Die handgemachte, aber übersichtlichere Lösung ist, das template nicht in einer Zeile zusammen zu bauen, sondern schrittweise als Array, das man am Ende mit join('') verklebt.

var html = [ '<tr>' ];
html.push('<td><input type="number" id="mid_' + i + '" class="form-control" disabled/></td>');
html.push('<td><input type="text" id="name_' + i + '" class="form-control"/></td>');
html.push('<td><select id="skill_' + i + '" class="form-control" />');
html.push('<td><input type="text" id="subskill_' + i + '" class="form-control" /></td>');
html.push('<td><input type="number" id="nivau_' + i + '" min="0" max="5" class="form-control" /></td>');
html.push('<td><span class="glyphicon glyphicon-minus addBtnRemove" id="addBtnRemove"></span></td>');
html.push('</tr>');

var tempTr = $(html.join(''));

Dann fällt auch gleich auf, dass das <td> mit dem <select> darin kein Ende-Tag hat.

Die Zeile, wo das <select>-Statement aufgebaut wird, kannst Du weiter untergliedern. Statt einer for(i=0...) Schleife verwende ich mal die Array-Methode .forEach:

var skillSelect = [ '<select id="skill_' + i + '" class="form-control">' ];
zulaessigeSkills.forEach(function(skill) {
   skillSelect.push('<option value="' + skill + '">' + skill + '</option>');
});
skillSelect.push('</select>');
html.push(skillSelect.join(''));

Im übrigen solltest Du Dir überlegen, die Klasse form-control nicht den <td>, sondern der <tr> zuzuordnen. Dann hast Du die class-Angabe nur einmal im HTML stehen und dein Template wird viel kleiner. In deinem Stylesheet ersetzt Du dann

td.form-control { ... }

durch

tr.form-control > td { ... }

und bist fertig. Den > Kombinator kannst Du auch weglassen, wenn Du keine geschachtelten Tabellen hast (und wer hat die heute noch, außer hartgesottenen Table-Layout Fans).

Man kann noch einiges in diesem Script durch moderne Syntax ersetzen (Template-Strings, Arrow-Functions für den forEach Callback), das hab ich erst mal weggelassen. Falls es dich interessiert: Mit JavaScript Template-Strings (und herausgezogener form-control Klasse) sähe einer der push-Aufrufe so aus:

html.push(`<td><input type="number" id="mid_${i}" disabled/></td>`);

Der Unterschied ist, dass der Template-String in Backticks (dem Gravis-Akzent) eingeschlossen wird statt in Hochkomma oder Anführungszeichen. Was dann in ${...} steht, wird als Javascript-Ausdruck interpretiert.

Der Aufbau der Optionen sähe mit Arrow-Function und Template-String so aus:

zulaessigeSkills.forEach(skill => skillSelect.push(`<option value="${skill}">${skill}</option>`));

Rolf