javascript - How to Disable specific element in Table Jquery? - Stack Overflow

admin管理员组

文章数量:1417720

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="txUnitNameAutoplete" 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

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="txUnitNameAutoplete" 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

• javascript
• jquery
• html
• dom

Share Improve this question Follow edited Jun 18, 2014 at 18:26 Shaunak D 20.6k1010 gold badges4747 silver badges7979 bronze badges asked May 28, 2014 at 10:35 Saad SolimanSaad Soliman 8222 silver badges1212 bronze badges 6

• I want to enable the last column You mean disable? right? because it's already enabled. – Dhaval Marthak Commented May 28, 2014 at 10:37
• sorry, I've edit it yes I need to disable it – Saad Soliman Commented May 28, 2014 at 10:40
• enable or disable? Explain the exact problem. Your question is not clear. – 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 Commented May 28, 2014 at 10:43
• 1 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 Commented May 28, 2014 at 10:52

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 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');

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);

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);

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();

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);

本文标签： javascriptHow to Disable specific element in Table JqueryStack Overflow