JQuery select tbody but not from nested tables

I am trying to add data to a table that is selectable using jquery. The problem is that this table can have nested tables inside it. What happens is that when I add data, not only the parent table is added, but all the child tables as well. Here is my code:

var template = window.app.getTemplate('myTemplate');
var image = {id: imageId, name: imageName, imageList: imageTypes, extension: ext, thumbNail: thumbNailPath};
$("#MyTable tbody:first").append(template(image));

      

Where myTemplate is configured like this:

<tr>
   <td>
      <table>
        <tr>
          <td></td>
        </tr>
        <tr>
           <td></td>
        </tr>
     </table>
   </td>
<tr>
</tr>
   <td></td>
</tr>

      

and MyTable is configured like this:

<table id="MyTable" data-attr="images">
    <thead>
    </thead>
    <tbody>       
    </tbody>
</table>

      

As I said, when the app is added, if there is more than one table in the body, all tags are added. So how do you choose only the first one?

thank

+3


source to share


3 answers


JQuery uses a CSS selector to access the element.

$("#MyTable > tbody:first")

      



E> F Matches any F element that is a child of E.

More details at http://www.w3.org/TR/CSS2/selector.html#child-selectors

+2


source


Perhaps if you update your jquery selector



$("#MyTable > tbody:first")

      

+2


source


Try:

$("#MyTable > tbody").append(template(image));

      

+1


source







All Articles