CODEWITHSUNDEEP
jqueryjquery-ui
bvnbhati
bvnbhati

Reputation: 380

getting dynamically added table rows

I am dynamically adding rows to a table that exists in a Jquery dialog. I want to clear all but first row of this table whenever the dialog is closed, so that if dialog is opened again only new set of rows is visible.

My objective is bring an empty table whenever this dialog is opened.

Here is my dialog code

$( "#personPmt" ).dialog({
    autoOpen: false,
    width: 675,
    modal: true,
    position: { my: "left top", at: "left bottom", of: $("#pmtDetails") },
    close: function() {
      $('#personPmtTable').remove("tr:gt(0)");
     }
  });

And here is my dialog

<div id="personPmt" title="Personal Payment">
      <table border="0" cellpadding="0" cellspacing="0" class="pmtEntry" id="personPmtTable">
        <tr>
          <th style="display:none">ID</th>
          <th class="cell_date">DOS</th>
          <th class="cell_code">CPT</th>
          <th class="cell_name">Description</th>
          <th class="cell_amt">Billed</th>
          <th class="cell_amt">Payment</th>
          <th class="cell_amt">Balance</th>
          <th class="cell_amt">New Balance</th>
        </tr>            
      </table>
    </div>

Upvotes: 1

Views: 197

Answers (2)

Robert Koritnik
Robert Koritnik

Reputation: 105059

Wrap your header in a thead element

<div id="personPmt" title="Personal Payment">
  <table class="pmtEntry" id="personPmtTable">
    <thead>
      <tr>
        <th style="display:none">ID</th>
        <th class="cell_date">DOS</th>
        <th class="cell_code">CPT</th>
        <th class="cell_name">Description</th>
        <th class="cell_amt">Billed</th>
        <th class="cell_amt">Payment</th>
        <th class="cell_amt">Balance</th>
        <th class="cell_amt">New Balance</th>
      </tr>
    </thead>
    <tbody>
    </tbody>        
  </table>
</div>

And then delete everything within tbody which will leave thead intact.

$("#personPmtTable tbody tr").remove();

Just make sure that you're appending new rows to tbody. :)

Upvotes: 2

bipen
bipen

Reputation: 36541

try this

 $('#personPmt >  tr').not(':first').remove();

Upvotes: 1

Related Questions