Javascript 添加到

我在jQuery中看到了以下代码片段，但其中存在问题

$(function () {
  $(document).delegate('.products','click',function (e) {
    var table_id = $(this).closest('table').attr('id');
    var no = table_id.match(/\d+/)[0];            
    var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
    var new_row = $('#'+first_row).children('td:first').find('select:first').clone();
    var tbody = $('#' + table_id + ' tbody');
    var n =  $(this).closest('table').find('select.prod_list').length+1;
    new_row.attr('id', 'reb' + no +'_'+ n);    
    $('#'+table_id).find('tbody tr:first').children('td:first').append('<div class="btn-group">'+new_row+'</div>');//Due to this line I'm getting message Object Object on screen.
  });  
});

从以上代码中，我主要在以下行中遇到问题：

$('#'+table_id).find('tbody tr:first').children('td:first').append('<div class="btn-group">'+new_row+'</div>');

我在屏幕上看到一个物体。为什么会这样？ 我有以下HTML：

<table id="blacklistgrid_1"  class="table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th style="vertical-align:middle">Products</th>
              <th style="vertical-align:middle">Pack Of</th>
              <th style="vertical-align:middle">Quantity</th>
              <th style="vertical-align:middle">Volume</th>
              <th style="vertical-align:middle">Unit</th>
              <th style="vertical-align:middle">Rebate Amount</th>
            </tr>
          </thead>
          <tbody class="apnd-test">
            <tr id="reb1_1">
              <td>
                <div class="btn-group">
                  <select name="product_id_1[1]" id="product_id_1_1" class="form-control prod_list">
                    <option value=""  selected='selected'>Select Product</option>
                  </select>
                </div>
              </td>
              <td><input type="text" name="pack[1]" id="pack_1" value="" class="form-control" size="8"/></td>
              <td><input type="text" name="quantity[1]" id="quantity_1" value="" class="form-control" size="8"/></td>
              <td><input type="text" name="volume[1]" id="volume_1" value="" class="form-control" size="8"/></td>
              <td>
                <div class="btn-group">
                  <select name="units[1]" id="units_1" class="form-control">
                    <option value=""  selected='selected'>Select Unit</option>
                    <option value="5" >Microsecond</option>
                    <option value="7" >oz</option>
                    <option value="9" >ml</option>
                    <option value="10" >L</option>
                    <option value="12" >gms</option>
                  </select>
                </div>
              </td>
              <td><input type="text" name="amount[1]" id="amount_1" value="" class="form-control" size="9"/></td>
            </tr>
          </tbody>
          <tfoot>
            <tr id="reb1_2">
              <td><button style="float:right; margin-bottom: 20px" class="products" type="button" class="btn btn-default" onclick="">&nbsp;Add</button></td>
              <td colspan="5"></td>                            
            </tr>
          </tfoot>                                           
        </table>

新行是一个对象，而不是字符串。将对象与字符串连接时，对象将强制为字符串，这通常会导致字符串[object object]

请尝试以下方法：

....append( $('<div class="btn-group"></div>').append(new_row) );

---

对于克隆的元素，最好使用appendTo将项目放置到位。由于需要更改要添加的最后一个选择列表的id，因此需要对代码进行更多修改。此外，您只想附加到现有的btn组，而不是克隆，如果我理解正确的话-

$(document).delegate('.products','click',function (e) {
    var table_id = $(this).closest('table').attr('id');
    var first_row = $('#'+table_id).find('tbody tr:first').attr('id');
    var toBeCloned = $('#'+first_row).find('td:first').find('select:last');
    var new_row = toBeCloned.clone();
    var idCounter = toBeCloned.attr('id').split('_');
    var new_id = 'product_id_1_' + (parseInt(idCounter[3]) + 1);
    console.log(new_id);
    var elementToAppendTo = $('#'+table_id).find('tbody tr:first .btn-group:first'); 
    $(new_row).appendTo(elementToAppendTo).attr('id', new_id);     
});  

本规范的结果如下：

<div class="btn-group">
    <select id="product_id_1_1" class="form-control prod_list" name="product_id_1[1]"></select>
    <select id="product_id_1_2" class="form-control prod_list" name="product_id_1[1]"></select>
    <select id="product_id_1_3" class="form-control prod_list" name="product_id_1[1]"></select>
    <select id="product_id_1_4" class="form-control prod_list" name="product_id_1[1]"></select>
    <select id="product_id_1_5" class="form-control prod_list" name="product_id_1[1]"></select>
</div>

---

因为新行是的克隆对象dropdown@DhavalMarthak：是的，我知道。也给我们看看你的HTML或者给我们一把小提琴。我认为您在将对象类型传递到.htmlen时遇到了问题。您想要什么？？？它是值？>尝试new_row.val在那里设置值！