Replacing Colspan = "2" with Colspan = "4" using Jquery

Question

Hi,

<table cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;" id="ctl00_ContentPlaceHolder2_FormView1" class="innerGridTable">
    <tbody>
        <tr>
                <td colspan="2">
        <tr>
                <td>
                        <b>VenueID:</b>
                </td>
                <td>
                        <span id="ctl00_ContentPlaceHolder2_FormView1_VenueIDLabel">3</span>
                </td>
        </tr>
</tbody>
</table>

I want to replace first Colspan="2" with Colspan="4" in my first TR not in complete page using JQuery.

Thanks.

Best Regards, MS

Answer 1

First of all, you forgot to close one of your <tr>'s. Second, you'll need a unique id or classname attached to that <td> to target it more easily. Third, use JQuery attr() method. Like this:

<tr>
     <td colspan="2" id="thatsmytd"></td>
</tr>

$('#thatsmytd').attr('colspan','4');

Answer 2

Use :first selector:

$("table tr:first")

Answer 3

$("table tr:first").attr('colspan','4');

Answer 4

This jQuery should handle the condition of finding a td with colspan 2 in the first tr of any table and set its colspan to 4.

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

The better thing to do would be to just fix your HTML to produce colspan=4

Answer 5

$("table[id$=FormView1] tr:first td[colspan=2]").attr("colspan", "4");

Answer 6

n1313's solution to changing the attribute is correct. If your question is how do you select the first row of a page that contains a cell with a colspan attribute then you just need to change your selector to something like this:

$("tr:first").find("td[colspan='2']:first").attr('colspan','4');

This is very specific. You may need to play with it to work exactly the way you need.