Question 166551 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can jQuery/PHP replace values in a WP ‘td’ element?

I have a html code below (created using a plugin).
I need to change colspan="6" to colspan="4".
I tried jQuery below, but it doesn’t work…
Would you please help me?

<table class="shop_table">
   <thead>
       <tr><th></tr></th>
   </thead>
   <tbody>
    <tr><td class="aa"></td></tr>
    <tr><td class="bb"></td></tr>
    <tr><td class="cc" colspan="6"></td></tr>
   <tbody>
</table>


$('.shop_table').find('td:last-child').contents().filter(function() {
    return this.nodeType===3;
}).remove().end().end().find('colspan="6"').replaceWith($(('colspan="4"'));

Thank you.

Tags:

3

Answers


  1. 0

    With the selector [colspan="6"] you can get to each and set a new attribute:

    $('.shop_table [colspan="6"]').each(function() {
  this.setAttribute('colspan', '4');
});
console.log($('table').html());
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table">
   <thead>
       <tr><th></th></tr>
   </thead>
   <tbody>
    <tr class="aa"><td></td></tr>
    <tr class="bb"><td></td></tr>
    <tr class="cc" colspan="6"><td></td></tr>
   <tbody>
</table>

    Or, without jQuery:

    for (const elm of document.querySelectorAll('.shop_table [colspan="6"]')) {
  elm.setAttribute('colspan', '4');
}
console.log(document.querySelector('table').innerHTML);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table">
   <thead>
       <tr><th></th></tr>
   </thead>
   <tbody>
    <tr class="aa"><td></td></tr>
    <tr class="bb"><td></td></tr>
    <tr class="cc" colspan="6"><td></td></tr>
   <tbody>
</table>
    Login or Signup to reply.
  2. 0

    You can use prop() or attr() and both methods will loop through all of them

    $('.shop_table td[colspan="6"]').prop('colSpan', 4)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table" border=1>
   <thead>
       <tr><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th><th>111</th></tr>
   </thead>
   <tbody>
    <tr><td class="aa">222</td></tr>
    <tr><td class="bb">333</td></tr>
    <tr><td class="cc" colspan="6">444</td></tr>
     <tr><td class="aa">222</td></tr>
    <tr><td class="bb">333</td></tr>
    <tr><td class="cc" colspan="6">444</td></tr>
   <tbody>
</table>
    Login or Signup to reply.
  3. 0

    Hey a simple answer to your question is this:

    $("table tr:last td[colspan=6]").attr('colspan',4);

    I select the Table, then the last TR, and then the TD representing the one you want to be changed.

    Then I add the attribute colspan 4.

    This is a codepen showing it working: https://codepen.io/SweetChillyPhilly/pen/MWJbBPo

    And here is the SO question where you can read more about how this solution became to be
    Replacing Colspan = "2" with Colspan = "4" using Jquery

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search