Question

我有数据，这是一个下拉数据，一个来自文本框值，我生成动态并获取值。现在我想从这些值生成表。我得到警告的价值，但我努力生成表

这是我的代码：

$('#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>') 
});

我尝试了这个，但我只获得了最后一条记录，如何使用for循环代码，我很困惑：

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

我动态生成这个html：

$("#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

您需要加入所有值，例如

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

在您的代码应该是php | 8 and in second row: java | 9之后

更新，

$('#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

只需在html中添加您的表格，如下所示：

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

用这个修改你的脚本：

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

它将为每个技能添加一个新行

如何生成动态表

2 个答案: