wie man dynamische Tabelle erzeugt

Question

Ich habe Daten mit mir, das ist ein Dropdown-Daten und eine aus Textfeld Werte, die ich dynamisch generieren und die Werte erhalten. Jetzt möchte ich die Tabelle aus diesen Wert generieren. I-Werte in Alarm bekommen, aber ich kämpfen, um den Tisch

hier ist mein Code zu generieren:

$('#save_skills').on("click",function(){ 
    $('.importance option:selected').each(function(){ 
     importance = $(this).text(); 
    }) 
    $('input.skill ').each(function() { 
     skill = $(this).val(); 
     alert(skill); 
    }); 
    $('#div_skills').append('<table class="table table-bordered"><tr><td>'+ skill +'</td><td>'+ importance +'</td></tr></table>') 
}); 

ich das versucht, aber ich bekomme nur letzte Zeuge, wie Sie unten Code for-Schleife verwenden, ich bin verwirrt :

$('#div_skills').append('<table class="table table-bordered"><tr><td>'+ skill +'</td><td>'+ importance +'</td></tr></table>') 

i erzeugen diesen hTML dynamisch:

$("#addSkills_link").on("click", function() { 

      $("#table_skills"). 

       append('<tr><td><input type="text" class="form-control skill" id="new_skill" placeholder="Skills"></td><td><select class="form-control importance" id="ddl_skills"><option value="">Select importance</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option></select></td>'); 
     }); 

Answer 1

Sie benötigen eine neue Zeile pro Fertigkeit hinzufügen wie alle Werte zu verbinden,

var importance = [],skill=[]; 
$('#save_skills').on("click",function(){ 
    $('.importance option:selected').each(function(){ 
     importance.push($(this).text());  
    }); 
    $('input.skill').each(function() { 
     skill.push($(this).val()); 
    }); 
    $('#div_skills').append('<table class="table table-bordered"><tr><td>'+ skill.join(', ') +'</td><td>'+ importance.join(', ') +'</td></tr></table>') 
}); 

Aktualisiert, nach dem Kommentar php | 8 and in second row: java | 9 y unser Code sollte

$('#save_skills').on("click",function(){ 
 
    table = $('<table class="table table-bordered"></table>').appendTo($('#div_skills').empty()) 
 
    $('input.skill').each(function(index) { 
 
     skill= $(this).val(); 
 
     importance= $('.importance').eq(index).find('option:selected').text();  
 
     table.append('<tr><td>'+skill+'</td><td>'+importance+'</td></tr>'); 
 
    }); 
 
});

#div_skills{border:1px solid #0cf}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table><tr><td><input type="text" class="form-control skill" id="new_skill" placeholder="Skills"></td><td> 
 
<select class="form-control importance" id="ddl_skills"><option value="">Select importance</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option></select></td></tr> 
 

 
<tr><td><input type="text" class="form-control skill" id="new_skill" placeholder="Skills"></td><td> 
 
<select class="form-control importance" id="ddl_skills"><option value="">Select importance</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option></select></td></tr> 
 
</table> 
 
<div id="div_skills"></div> 
 
<button id="save_skills">Save Skills</button>

Answer 2

Sie Ihre Tabelle in die Sie hinzufügen r html wie folgt:

<table class="table table-bordered" id="div_skills_table"></table> 

Und Ihr Skript mit diesem ändern:

$('input.skill').each(function() { 
    skill = $(this).val(); 
    $('#div_skills_table').append('<tr><td>'+ skill +'</td><td>'+ importance +'</td></tr>'); 
}); 

Es wird