Question

我在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>

Answer 1

new_row是一个对象，而不是一个字符串。当您将对象与字符串连接时，该对象将被强制转换为字符串，这通常会导致字符串[object Object]。

请改为尝试：

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

Answer 2

对于克隆元素，最好使用appendTo（）将项目放置到位。由于您需要更改上一个选择列表的ID，因此您需要对代码进行一些修改。另外，你只想附加到现有的btn-group，而不是克隆那个（如果我理解的话） -

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

http://jsfiddle.net/jayblanchard/vUTEv/1/

此代码会导致以下内容 -

<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>

附加问题

2 个答案: