如何禁用表Jquery中的特定元素?

时间:2014-05-28 10:35:02

标签: javascript jquery html html5 dom

这是我在我的应用程序中使用的表。我有大约10列,我用来对另一个按钮进行操作以启用和禁用但我无法获取最后一列来锁定它

这是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)

不工作

我希望禁用表格中的最后一列,我尝试这可以但是它不起作用任何正文可以帮助解决这个问题

5 个答案:

答案 0 :(得分:1)

您的Jquery选择器应如下所示:

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

也是为了达到选择后的最后一个td是另一种选择:

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

答案 1 :(得分:1)

dir="rtl"的方向:从右到左。

对于可见结构中的最后一个元素: 你需要得到第一个td元素。

$('#DescriptionValue td:first');

要禁用,

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

<强> DEMO Fiddle.


对于实际的最后一个元素:

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

答案 2 :(得分:1)

你的桌子从右到左,所以我假设在#34;最后一栏&#34;你的意思是左边的那个。在这种情况下,您有两个选择:

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

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

如果通过&#34; last&#34;你的意思是最右边的那个,只需用10更改1

要禁用:

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

答案 3 :(得分:1)

试试这个:

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

答案 4 :(得分:1)

上面提到的代码适用于现代浏览器。如果您的目标是旧浏览器(IE8),则需要使用以下代码:

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

实际上,最后一列是一个空列。您可能意味着列号为10。

在现代浏览器中,您可以使用以下内容:

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