How to Disable specific element in Table Jquery?

Question

This is my Table that i use in my application. i've about 10 column and i use to make an action on another button to make enable and disable but I can't get the last column to lock it

this is HTML

 <table id="DescriptionValue" width="100%" cellpadding="0" cellspacing="0" class="rgview" dir="rtl">
            <thead>
                <tr>
                    <th style="width: 70px">h1</th>
                    <th style="width: 20px">h2</th>
                    <th style="width: 40px">h3</th>
                    <th style="width: 40px">h4</th>
                    <th style="width: 40px">h5</th>
                    <th style="width: 40px">h6</th>
                    <th style="width: 40px">h7</th>
                    <th style="width: 40px">h8</th>
                    <th style="width: 40px">h9</th>
                    <th style="width: 40px">h10</th>
                    <th style="width: 20px">
                        <img onclick="InsertRow_Target();" src="../../../General/Images/ContextPlus.png" />
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td id="tdUnitName">
                        <input type="text" id="txUnitNameAutocomplete" style="width: 100%" placeholder="" />
                    </td>
                    <td id="tdtxShad">
                        <input type="text" id="txShad" style="width: 100%" disabled="disabled" />
                    </td>
                    <td id="tdtxBuy">
                        <input type="text" id="txBuy" style="width: 100%" />
                    </td>
                    <td id="tdtxSale">
                        <input type="text" id="txSale" style="width: 100%" />
                    </td>
                    <td id="tdtxSalePosiotn">
                        <input type="text" id="txSalePosiotn" style="width: 100%" />
                    </td>
                    <td id="tdtxRepresentative">
                        <input type="text" id="txRepresentative" style="width: 100%" />
                    </td>
                    <td id="tdtxTotal">
                        <input type="text" id="txTotal" style="width: 100%" />
                    </td>
                    <td id="tdtxhalfTotal">
                        <input type="text" id="txhalfTotal" style="width: 100%" />
                    </td>
                    <td id="tdtxSpecial">
                        <input type="text" id="txSpecial" onkeydown="" style="width: 100%" />
                    </td>
                    <td id="tdtxBarCode">
                        <input type="text" id="txBarCode" onkeydown="" style="width: 100%" />
                    </td>
                    <td></td>
                </tr>
            </tbody>
        </table>

JQuery

$("td:nth-child(1).last)

not working

and I want to disable the last column in table and i tries this could but it does not work can any body help about this issue

I want to enable the last column You mean disable? right? because it's already enabled. — Dhaval Marthak
– Dhaval Marthak, Commented May 28, 2014 at 10:37
enable or disable? Explain the exact problem. Your question is not clear. — Shaunak D
– Shaunak D, Commented May 28, 2014 at 10:40
Do you want to disable/enable the full last column or the last cell? Your table is right-to-left so you need to put nth-child(10) to get it. — Tallmaris
– Tallmaris, Commented May 28, 2014 at 10:43
Please clarify which column you consider to be the last one in your Right-to-left table? The one on the extreme left, or the one on the extreme right? :) — iCollect.it Ltd
– iCollect.it Ltd, Commented May 28, 2014 at 10:52

Shaunak D · Accepted Answer · 2014-05-28 10:57:52Z

1

The direction of your table dir="rtl" : Right to Left.

For last element in your visible structure: You need to get first td element.

$('#DescriptionValue td:first');

And to disable,

$('#DescriptionValue td:first input').attr('readonly','readonly');

DEMO Fiddle.

For actual last element:

$('#DescriptionValue td:last input').attr('readonly','readonly');

edited May 28, 2014 at 10:57

answered May 28, 2014 at 10:44

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

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

3 Comments

Saad Soliman Over a year ago

and If I need to get the last will I have to change 'rtl' to 'ltr' or edit the 'td:last' instead of 'first' but what if i need the last-1 what should i do ?

Shaunak D Over a year ago

yes. Right @SaadSoliman. But in your html code, there is an empty last <td></td>. So check your code beofre you check the output.

Saad Soliman Over a year ago

yes, and i edit my Question for that issue because the last <td> hold button

Tallmaris · Accepted Answer · 2014-05-28 10:47:22Z

1

Your table is right-to-left, so I assume that by "last column" you mean the one on the left. In that case you have two options:

$("td:nth-child(10)") // <- selects the last column, ALL cells

$("td:nth-child(10)").last() // select the bottom cell of the last column

If by "last" you mean the one on the far right, just change the 10 with 1.

To disable:

<your_selector_from_above>.children("input").prop("disabled", true);

answered May 28, 2014 at 10:47

Tallmaris

7,5903 gold badges31 silver badges59 bronze badges

Comments

abdulbasit · Accepted Answer · 2014-05-28 10:48:25Z

Try this:

        //second last td
        var secondLastTD = $('table#DescriptionValue tr td:nth-last-child(2)');
        // disable second last td inputs
        secondLastTD.find('input').prop('disabled', true);

        //last td
        var lastTD = $('table#DescriptionValue tr td:nth-last-child(1)');
        // disable last td inputs
        lastTD.find('input').prop('disabled', true);

        //first td
        var firstTD = $('table#DescriptionValue tr td:nth-child(1)');
        // disable first td inputs
        firstTD.find('input').prop('disabled', true);

        //second td
        var secondTD = $('table#DescriptionValue tr td:nth-child(2)');
        // disable second td inputs
        secondTD.find('input').prop('disabled', true);

Pramod S. Nikam · Accepted Answer · 2014-05-28 10:59:26Z

1

Your Jquery selector should be as below :

 $("td:nth-child(1)").last();

also so as to reach last td following selector is an alternative:

$("tbody tr td").last();

edited May 28, 2014 at 10:59

answered May 28, 2014 at 10:42

Pramod S. Nikam

4,5628 gold badges41 silver badges66 bronze badges

Comments

Wissam El-Kik · Accepted Answer · 2014-05-28 11:48:36Z

1

The code mentioned above would work on modern browsers. If you're targeting old browsers (IE8), then you need to use the following code:

$("table#DescriptionValue tbody td + td + td + td + td +td + td + td + td + td").find("input").prop("disabled", true);

Actually, the last column is an empty column. You probably mean that the column number 10.

On modern browsers, you can use the following:

$("table#DescriptionValue tbody td:nth-child(10) input").prop("disabled", true);

answered May 28, 2014 at 11:48

Wissam El-Kik

2,5251 gold badge18 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to Disable specific element in Table Jquery?

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related