如何使用jQuery将两个select元素附加到表行？

Question

我想根据指定的数组创建一个动态表，如下所示：

​

​

我的代码：

<table id="selectTable" class="m-table">
    <thead>
        <tr>
            <th>Products</th>
            <th>Range</th>
        </tr>
    </thead>
</table>

JQUERY

function drawTable(data) {

var dateTable = $('#selectTable');
selectEl  = $('<select>'),
    selectVal = [
        {val : 1, text: '1'},
        {val : 2, text: '2'},
        {val : 3, text: '3'},
        {val : 4, text: '4'},
        {val : 5, text: '5'}
    ];

$(selectVal).each(function() {
    selectEl
    .append($('<option>')
            .attr('value',this.val)
            .text(this.text));
});

dateTable.children('tbody').empty();

$.each(data,function(k,v){

    var row     = $('<tr />',{'class':'row-'+k});
    dateTable.append(row);
    row.append($('<td />').append(v));
    row.append($('<td />').append(selectEl + ' ' + selectEl ));

});
}

var a = ['Product-1','Product-2','Product-3','Product-4','Product-5'];


drawTable(a);

表和selectbox将动态创建，并附加到表的每一行。我该怎么做？

http://jsfiddle.net/dsjLT/2/

Answer 1

我在每一行中添加了两个选择框，并进行了以下编辑；

dateTable.append(row);
row.append($('<td />').append(v));
row.append($('<td />').append(selectEl));
row.children('td:nth-child(2)').append(selectEl.clone());

http://jsfiddle.net/dsjLT/6/

Answer 2

不确定您能否以这种方式重用selectEl。我会尝试为每一行重新创建它。这是可行的(尽管它需要清理)：

function drawTable(data) {

  var dateTable = $('#selectTable');
  dateTable.children('tbody').empty();

  $.each(data,function(k,v){

    var selectEl  = $('<select>'),
      selectVal = [
        {val : 1, text: '1'},
        {val : 2, text: '2'},
        {val : 3, text: '3'},
        {val : 4, text: '4'},
        {val : 5, text: '5'}
      ];

      $(selectVal).each(function() {
        selectEl
       .append($('<option>')
               .attr('value',this.val)
               .text(this.text));
      });

      var row     = $('<tr />',{'class':'row-'+k});
      dateTable.append(row);
      row.append($('<td />').append(v));
      row.append($('<td />').append(selectEl));

   });
}

var a = ['Product-1','Product-2','Product-3','Product-4','Product-5'];

drawTable(a);

Answer 3

问题是$('select')是同一个实例，因此只能追加到一行。您需要在附加到行之前进行克隆。

请参阅http://jsfiddle.net/hutingung/dsjLT/3/

代码片段

$.each(data,function(k,v){

    var row     = $('<tr />',{'class':'row-'+k});
    dateTable.append(row);
    row.append($('<td />').append(v));
    //you are refer to same instance of selectEL
    //row.append($('<td />').append(selectEl));
    //Use clone to append
    selectEl.clone().appendTo(row);

});