Skip to content
Advertisement

Append to a table when tbody is absent and how to make all existing jqueries work for that row

I have the following jquery to append to a table dynamically based on user interaction and data received from the server. Now each column in the table has some specific class and some style attributes like the column itemId is hidden and so on. My dynamic addition is working fine if I already have one row but if its none it just adds another header row which I can understand is because my code copies the last tr element. Question is how do I go about adding a row to ‘tbody’ when their are no rows.

JavaScript

My second question is that my table cells respond to a double click. But the newly added row never responds (even when there are previous rows and the row is added normally).

Why doesn’t the listener work on the new row?

My listener goes like this:

JavaScript

Advertisement

Answer

You can go with template approach to create a template for your table row to be cloned when required.

Say your table is this:

JavaScript

When you populate:

JavaScript

Demo

For adding even/odd styles you can use css itself.

JavaScript

If not you want to do it with the class then:

JavaScript

Demo

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement