How to replace value in td using jquery/php? （wordpress） - php

Question

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.

Answer 1

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>

Answer 2

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>

Answer 3

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