Question

我不是UI开发人员，但是我在javascript上做R＆amp; D，我编写了一个代码，每行都会添加，但我想在新创建的行中添加一个select选项。

以下是代码

 $(document).ready(function(){
  var i=1;
 $("#add_row").click(function(){
  $('#addr'+i).html("</td><td><input name='name"+i+"' type='text' placeholder='FIELD' class='form-control input-md'  /> </td> <select name='TYPE' ><option value='ORANGE'>ORANGE</option><option value='YELLOW'>YELLOW</option><option value='GREEN'>GREEN</option></select> <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td></tr>")});

我们可以修改这个吗，我想在每次调用#add_row函数时得到Select标记

Answer 1

我无法清楚地知道你想要什么。但是我为你创建了一个fiddle。

 $(document).ready(function(){
  var i=1;
  $("#add_row").click(function(){
    $('#addr').append("<tr><td><input name='name"+i+"' type='text' placeholder='FIELD' class='form-control input-md'  /> </td><td> <select name='TYPE' ><option value='ORANGE'>ORANGE</option><option value='YELLOW'>YELLOW</option><option value='GREEN'>GREEN</option></select> <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td></tr>")
    i++;
   });
});

HTML就像

<button id="add_row">Add row</button>
<table id="addr"></table>

Answer 2

这就是我为你所做的。

 $(document).ready(function(){
 $("#add_row").click(function(){
 	var totalRows = $('.row').length, nextI = totalRows + 1;
  $('.rowContainer').append("<tr class='row'><td><input name='name_" +nextI+ "' type='text' placeholder='FIELD' class='form-control input-md' /><select name='TYPE'><option value='ORANGE'>ORANGE</option><option value='YELLOW'>YELLOW</option><option value='GREEN'>GREEN</option></select></td><td class='deleterow'><div class='glyphicon glyphicon-remove'>X</div></td></tr>");
  });
  $(document).on('click', ".glyphicon-remove", function() {
		$(this).closest('.row').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add_row">Add row !</button>
<table class="rowContainer"></table>

Answer 3

我建议你在事件回调中将HTML分开，以便轻松处理每一列及其数据。

我在我的示例中使用了jQuery的Selectors和// Waiti the DOM LOAD $(document).ready(function(){ // Setting the first row ID as 1 var row_ID = 1; // Handle the button click event $("#add_row").click(function(){ // Setting some templates to separate yout HTMLs var col_1_template = "<td><input name='name" + row_ID + "' type='text' placeholder='FIELD' class='form-control input-md' /></td>"; var col_2_template = "<td><select name='TYPE" + row_ID + "' ><option value='ORANGE'>ORANGE</option><option value='YELLOW'>YELLOW</option><option value='GREEN'>GREEN</option></select> <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>"; // Insertint an empty line $('#your_table_ID').append("<tr></tr>"); // Get the new line var actual_line = $('#your_table_ID tr:last'); // Appending each column actual_line.append(col_1_template) actual_line.append(col_2_template); // Rows count row_ID++; }); });功能。

工作示例，看看：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="add_row">+</button>
<table id="your_table_ID"></table>

var dict: [String: String] {
    dict["a"] = "b"
}

jQuery的Selectors官方文档： https://api.jquery.com/category/selectors/

jQuery的追加： http://api.jquery.com/append/

希望有所帮助

如何使用select option jquery函数

3 个答案: