How to stop an "add/delete table row script" from deleting the last row and how to limit rows?

JavaScript
1

I am using code like so to add and remove rows to a table:

<script type="text/javascript">
  $(document).ready(function(){
      
    jQuery(document).delegate('a.add-record', 'click', function(e) {
     e.preventDefault();    
     var content = jQuery('#sample_table tr'),
     size = jQuery('#tbl_posts >tbody >tr').length + 1,
     element = null,    
     element = content.clone();
     element.attr('id', 'rec-'+size);
     element.find('.delete-record').attr('data-id', size);
     element.appendTo('#tbl_posts_body');
     element.find('.sn').html(size);
   });
    
    jQuery(document).delegate('a.delete-record', 'click', function(e) {
     e.preventDefault();    
     var id = jQuery(this).attr('data-id');
     var targetDiv = jQuery(this).attr('targetDiv');
     jQuery('#rec-' + id).remove();
      
      
      //regenerate index number on table
    $('#tbl_posts_body tr').each(function(index){
		$(this).find('span.sn').html(index+1);
    });
        return true;
    });
  });
</script>

It works well with two exceptions:

  1. it allows me to delete the last remaining row (I don’t want this)

  2. I’d like to limit the max number of rows to a variable value (10, say)

My JS is not great; just starting along that road. I’d appreciate some help.

Here’s the HTML (if required):

<div id="rcorners3" class="container table-responsive headroom-3">
                    <table class="table" id="tbl_posts">
                        <thead>
                            <tr>
                                <td colspan="2" class="course-book-heading">Attendee Details</td>
                            </tr>
                                <th colspan="4"><textarea class="form-control rounded-0 w-100" id="requirements" name="requirements" rows="3" placeholder="Do any of the attendees you are entering have any special requirements?"></textarea></th>
                            </tr>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Job Title</th>
                                <th><a class="btn-sm btn-rounded pull-right add-record its-blue-bg white-text pr-4 pl-4" data-added="0"><i class="fas fa-plus"></i></a></th>
                            </tr>
                        </thead>

                        <tbody id="tbl_posts_body">
                            <tr id="rec-1">
                                <td><span class="sn">1</span>.</td>
                                <td><input type="text" id="name" name="name"></td>
                                <td><input type="email" id="email" name="email"</td>
                                <td><input type="text" id="jobtitle" name="jobtitle"</td>
                                <td><a class="btn-sm btn-rounded delete-record its-blue-bg lighten-2 pl-3 pr-3" data-id="1"><i class="fas fa-minus"></i></a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>

Cheers

2

There are some significant problems in that html code. The second table row element is missing, and some inputs in the last table row haven’t been closed.

After fixing those, I don’t see any interaction buttons on the page. Looking that the HTML code I see things like btn-rounded so is that bootstrap that you’re using?

But it’s not just bootstrap. The rounded buttons are a part of material design? This is where I feel too many assumptions are being made.

To not delete the last row, you can check if the number of rows is 1 or less and exit out.
To not add more than 10, you can check if the number of rows is 10 or more and exit out.

Can you please give us enough information so that a test page can be put together for your code.

1 Like
3

It’s link-based.

<td><a class="btn-sm btn-rounded ***delete-record*** its-blue-bg lighten-2 pl-3 pr-3" data-id="1"><i class="fas fa-minus"></i></a></td>

    jQuery(document).delegate('a.delete-record', 'click', function(e) {

delegated binds so that rows can be added dynamically. I’m assuming CSS is making those seemingly empty items have width and height, probably with an image insertion if i had to guess from the fa-minus indicator. (a minus symbol for deleting a row?)

1 Like
4

Aren’t delegates a really old way of doing that?

These days, the following jQuery on syntax is used instead:

$(document).on("click", "a.delete-record", function(e) {

I also query (ha. ha. ha.) why the OP uses jQuery when $ is available in his code too.

1 Like
5

At a guess (well an educated one, since the OP has openly declared he’s new to JS), the code has been borrowed from a site that was based around wordpress-style declarations for jquery. Probably a pretty old one, given the use of delegate instead of on, as you mentioned.

1 Like
6

m_huntley and Paul_WIlkins,

Yes, you are right, my JS is at step 1 and I am using borrowed code that, while I diod limit my Googling to pages less than a year old, may be outdated.
I “am” learning JS but, in the meantime, I would appreciate a little help with how I can change “what I have here” (as I have invested some time in trying to understand it) just to do those checks.

7

Right so lets cover a few of the basics of what Paul and I have mentioned, as a learning point:

In a standard webpage context when importing jQuery, $(selector) and jQuery(selector) are equivalant statments, so most people will use $ because it’s shorter.

.delegate was replaced by .on in jQuery 3.X, and deprecated - which means at some point in the future versions of jQuery, it will be removed. You should consider changing to .on for future-proofing, but it won’t cause your code to explode at the current time.

Let’s turn to your code, and what you want to achieve.

Paul’s advice here is pointing you towards making a selection of the rows of your table (Hint: your table body has an ID, and you want the tr’s under it.) and then comparing the number of entries in your selector to 1. If it equals 1, return from the function without doing anything.
(If you get the courage to extend this, consider how you might hide the delete button if there is only 1 row remaining)

Same thing, but in reverse, and inside your add function instead of the delete one: compare the number of rows to 10 (or your variable, either way), and return if it equals.
(The same extension also applies here: try hiding the add buttons if the number of rows is 10.)

Give it a try, show us what you come up with, and we’ll advise further.

1 Like
8

Thanks for the guidance.

I have a feeling there is a count (of sort) in place already

┆size = jQuery('#tbl_posts >tbody >tr').length + 1,

I believe the line is used to add the “serial number” on the left.

My JS is not good enough to know how to use that however. Bit crap, sorry.

9

not quite sure why it’s adding 1 to that, given that length would be the number of rows… [EDIT: It’s trying to use that as “the next number is”… which makes size a bit of a bad name for that variable… but whatever.]

the selector could be simplified to #tbl_posts_body > tr (or just #tbl_posts_body tr , since there’s no tr’s inside your tr’s…)

So at the start of your add/delete codes, compare that length to the target number (1 or 10, or variable), and if it equals to that number, return;

1 Like
10

m_huntley

Hi.

I added the following to the start of my add code:

var rows = $( "#tbl_posts_body tr" ).length;
        if (rows >= 10) {
            return;
        }

Success!

Thank you for your help and for the link you included, particularly for your prompting approach rather than just giving me the answer.

OK, I can tick a new box… JavaScript Guru, tick, done :slight_smile:

2 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.