Question

我刚刚开始使用JavaScript / jQuery，我不明白为什么只有在单击之前添加步骤或仅在第一个STEP / PP表中添加代码，我的代码才会填充select标记。

我已经搜索过，如果您使用id而不是class属性，这是一个常见问题，但是在这里，我使用了class。如果您有任何建议，那就太好了。

这是我的代码：

$('.add').click(function() {
  $('.template:last').after('<div class = "template"><table id="layout-table" WIDTH=${Globals.PRINTEDPAGE_WIDTH} BORDER=1 BORDERCOLOR="#000000" CELLPADDING=1 CELLSPACING=0 style="margin-bottom:10px;"><th>STEP</th><th>PP</th> <tr> <!-- Uso questa tabella per step e cicli/processi--><td><select class="steps3"></select></td><td><select class="pp"></select></td></tr> </table>');
});
$(document).ready(function() {
  $(".remove").click(function() {
    $(".template:last").remove();
  });
});
$('.steps3').on("click", function() {
  for (i = 1; i <= 32; i += 1) {
    $('.steps3').append($('<option>', {
      value: i,
      text: i
    }));

  }
});
$('.pp').on("click", function() {
  for (i = 1; i <= 12; i += 1) {
    $('.pp').append($('<option>', {
      value: i,
      text: i
    }));

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="template">
  <table id="layout-table" width=50% border=1 cellpadding=1 CELLSPACING=0 style="margin-bottom:10px;">
    <th>STEP</th>
    <th>PP</th>
    <tr>
      <!-- Uso questa tabella per step e cicli/processi-->
      <td>
        <select class="steps3">
        </select>
      </td>
      <td>
        <select class="pp">
        </select>
      </td>
    </tr>
  </table>
</div>
<!-- template -->
<p><button type="button" name="Submit" class="add">Add new step</button></p>
<p><button type="button" class="remove" name="Submit">Remove step</button></p>

这是JSFiddle上的代码：http://jsfiddle.net/hoptys0a/

感谢SCA

Answer 1

以下是解决方法：http://jsfiddle.net/thecreativedev/hoptys0a/8/

$('.add').click(function() {
$('.template:last').after('<div class = "template"><table id="layout-table" WIDTH=${Globals.PRINTEDPAGE_WIDTH} BORDER=1 BORDERCOLOR="#000000" CELLPADDING=1 CELLSPACING=0 style="margin-bottom:10px;"><th>STEP</th><th>PP</th> <tr> <!-- Uso questa tabella per step e cicli/processi--><td><select class="steps3"></select></td><td><select class="pp"></select></td></tr> </table>');
});
$(document).ready(function(){
$('body').on('click', '.remove', function() {
//$(".remove").click(function(){
    $(".template:last").remove();
});
});

$('body').on('click', '.steps3', function() {
for (i = 1; i <= 32; i += 1) {
    $(this).append($('<option>', {value:i, text:i}));

}
});
 $('body').on('click', '.pp', function() {
  //   $('.pp').on("click", function() {
   for (i = 1; i <= 12; i += 1) {
    $(this).append($('<option>', {value:i, text:i}));

  }
});

Answer 2

您可以使用find（“。class”）获取包含该类的所有元素。

first_select();
second_select();

$('.add').click(function() {
    $('.template:last').after('<div class = "template"><table id="layout-table" WIDTH=${Globals.PRINTEDPAGE_WIDTH} BORDER=1          BORDERCOLOR="#000000" CELLPADDING=1 CELLSPACING=0 style="margin-bottom:10px;"><th>STEP</th><th>PP</th> <tr> <!-- Uso questa tabella per step e cicli/processi--><td><select class="steps3"></select></td><td><select class="pp"></select></td></tr> </table>');

    first_select();
    second_select();
});

$(document).ready(function(){
    $(".remove").click(function(){
        $(".template:last").remove();
    });
});


function first_select() {
        for (i = 1; i <= 32; i += 1) {
        $("body").find(".steps3").append($('<option>', {value:i, text:i}));
    }
}

function second_select() {
        for (i = 1; i <= 12; i += 1) {
        $("body").find(".pp").append($('<option>', {value:i, text:i}));
    }
}

jsFiddle

Answer 3

[已更新] 这是我的解决方案。请查看JSFiddle或此处：

$(function() {
    addTable();
});

function addTable(){  
    $("#containerTables").append('<table width=50% border=1 cellpadding=1 CELLSPACING=0 style="margin-bottom:10px;"><thead><tr><th>STEP</th><th>PP</th></tr><thead><tbody><tr><td><select class="select-step"></select></td><td><select class="select-process"></td></tr></tbody></table>');
  
    for (var i = 1; i <= 32; i ++) {
  	$("#containerTables table:last-child .select-step").append($('<option>', {value:i, text:i}));
    }
  
    for (var j = 1; j <= 12; j ++) {
  	$("#containerTables table:last-child .select-process").append($('<option>', {value:j, text:j}));
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="containerTables"></div>
<button type="button" onclick="addTable()">
  Add new step
</button>
<button type="button" onclick="$('#containerTables table:last-child').remove()">
  Remove last step
</button>

从选择工作中加载选项仅适用于班级的第一项

3 个答案: