How to avoid appending rest of the <td>s except first one from a new <tr> appended to the <tbody> using jQuery?

Question

I've a table in HTML. Actually there can be many such tables present with different Ids. I'm appending a new table row on click of a button using jQuery. The table has six columns. The first row of a table which is present when the page loads contains HTML elements in all it's six columns. The next row contains Add button in first column with other five <td></td>When I click on this Add button I want to append a new row which will contain only first <td> with it's HTML element and other five <td></td> shouldn't be displayed. How to achieve this? My HTML is as follows:

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

The jQuery function I've written to append a new row is as follows:

$(function () {
//function to create new row in add rebate by product grid 
  $(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).clone();
    var tbody = $('#' + table_id + ' tbody');
    var n = $('tr', tbody).length  + 1;
    new_row.attr('id', 'reb' + no +'_'+ n);    

    $(':input', new_row).not('.prod_list').remove();
    $('select', new_row).attr('name','product_id_'+no+'['+n+']');
    $('select', new_row).attr('id','product_id_'+no+'_'+n);
    $('<button style="color:#C00; opacity: 2;margin-top: 6px;" type="button" class="close delete" data-dismiss="alert" aria-hidden="true">&times;</button>').appendTo( $(new_row.find('td:first')) );
    tbody.append(new_row);

    //function to delete row from add rebate by product grid 
    $('.delete').on('click', deleteRow);      
  });  
});

I'm able to append the new table row successfullly in each of the tables present on page. There is no issue with it. The issue I want solution for it is the rest of the <td></td> should not displayed in a newly added row. Due to these blank <td></td> the table seems incomplete to the user. Only first column should be displayed over there. How to achieve this? Can some one please help me in this regard? I'm using jquery-1.9.1.min.js.
My jsFIddle.

In jsFiddle table borders are not displayin but in my working instance it does. I don;t want to show those blank <td></td>s.

Answer 1

Add this line to your jQuery function right after the statement tbody.append(new_row);

$(new_row).children('td').not('td:eq(0)').remove();

Hope it will help you.

Answer 2

Rather than clone an existing row, try creating a new row. jQuery can do this just as $("<tr>"), I believe, but the "more proper" way is document.createElement('tr').

You can then put in whatever cells you want. It should be noted, however, that the browser will attempt to normalise the table (ie. ensure it has the same number of columns in each row) so results may vary unpredictably if you have the wrong number of cells.

Answer 3

You might be able to do this largely in CSS using something like the following:

.last td.not_first {
     display: none;   
}

Then you just need to add classes to your tr and tds like so:

<table>
    <tr class="not_last"><td>First Col</td><td class="not_first">Sec Col</td><td class="not_first">Third Col</td></tr>
    <tr class="not_last"><td>First Col</td><td class="not_first">Sec Col</td><td class="not_first">Third Col</td></tr>
    <tr class="last"><td>First Col</td><td class="not_first">Sec Col</td><td class="not_first">Third Col</td></tr>
</table>

You'll need to do some juggling of the classes whenever you add a new row, but you can use addClass and toggleClass to make that pretty easy. It will be simpler if you create the new row from scratch each time though, rather than cloning it.