Append text when html is dynamically generated with jQuery

Question

I have this html. I need to .append certain text based on some conditions:

1) td.name a contains text which triggers append

2) td.name and td.quantity are inside the same row

3) .append is done only in the same row td.name and td.quantity are in.

There are multiple rows. Rows don't have classes and code is dynamically generated - each row may end up on different position in the table. How do I target this

if (jQuery('tbody tr td.name a:contains("text which triggers append")').length > 0) {
    jQuery('tbody tr td.quantity').append('<span>text to append</span>');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<tbody>
    <tr>
        <td class="name"><a>text which triggers append</a></td>
        <td class="quantity">quantity</td>
    </tr>
    <tr>
        <td class="name"><a>other text</a></td>
        <td class="quantity">other quantity</td>
    </tr>
</tbody>

XYZ · Accepted Answer · 2017-09-07 12:22:39Z

1

Try

jQuery('tbody tr td.name a:contains("text which triggers append")').closest('tr').find('td.quantity').append('<span>text to append</span>');

 jQuery('tbody tr td.name a:contains("text which triggers append")').closest('tr').find('td.quantity').append('<span>text to append</span>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<table border="1">
<tbody>
    <tr>
        <td class="name"><a>text which triggers append</a></td>
        <td class="quantity">quantity</td>
    </tr>
    <tr>
        <td class="name"><a>other text</a></td>
        <td class="quantity">other quantity</td>
    </tr>
</tbody>
<table>

edited Sep 7, 2017 at 12:22

answered Sep 7, 2017 at 12:08

XYZ

4,4782 gold badges18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shiladitya · Accepted Answer · 2017-09-07 12:18:31Z

Here you go with a solution

$('table tbody tr').each(function(){
  $(this).find('td.name').each(function(){
    if($(this).find('a:contains("text which triggers append")').length > 0){
      $(this).siblings('td.quantity').append('<span>text to append</span>');
    }
  });
});

td {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
        <td class="name"><a>text which triggers append</a></td>
        <td class="quantity">quantity</td>
    </tr>
    <tr>
        <td class="name"><a>other text</a></td>
        <td class="quantity">other quantity</td>
    </tr>
  </tbody>
</table>

As you have mentioned td.name & td.quantity are in same row, so I've used jQuery siblings to get the td.quantity.

Hope this will help you.

Collectives™ on Stack Overflow

Append text when html is dynamically generated with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related