【问题标题】:select specific input element in a specific row and column选择特定行和列中的特定输入元素
【发布时间】:2012-01-02 12:30:29
【问题描述】:

考虑这张图片:

如何在没有 jQuery 的 ID 的情况下选择它?我的意思是我怎么能像这样选择它:

在 Code=1000 和列 Desc2 的行中查找输入

谢谢

编辑 1)

HTML 代码

<table border="1" width="300px">
    <tr>
        <td>
            Desc2
        </td>
        <td>
            Desc1
        </td>
        <td>
            Code
        </td>
    </tr>
    <tr>
        <td bgcolor="#CCCCB3">
            <input id="Text1" type="text" />
        </td>
        <td>
        </td>
        <td>
            1000
        </td>
    </tr>
    <tr>
        <td bgcolor="#FFFFCC">
            &nbsp;
        </td>
        <td bgcolor="#FFFFCC">
        </td>
        <td bgcolor="#FFFFCC">
        </td>
    </tr>
    <tr>
        <td bgcolor="#CCCCB3">
            <input id="Text2" type="text" />
        </td>
        <td>
        </td>
        <td>
            1001
        </td>
        <tr>
            <td bgcolor="#CCCCB3" class="style1">
                <input id="Text3" type="text" />
            </td>
            <td class="style1">
            </td>
            <td class="style1">
                1002
            </td>
        </tr>
        <tr>
            <td bgcolor="#CCCCB3">
                <input id="Text4" type="text" />
            </td>
            <td>
            </td>
            <td>
                1003
            </td>
        </tr>
</table>

【问题讨论】:

  • 如果您发布示例的 html 而不是图像,这将更容易提供帮助。那是整张桌子还是只是其中的一部分?我的意思是,如果每行只有一个输入字段,那就很简单了。

标签: javascript jquery asp.net jquery-selectors


【解决方案1】:

选择最后一个单元格,过滤最后一个单元格值为“1000”的行,并选择集合的第一个输入元素:

$("table td:last-of-type").filter(function(){
    return $(this).text() == "1000";
}).parent().find("input:first");

为了构建这样的选择器,你可以使用以下:

  • :eq() 和 .eq()
  • :nth-child()(仅针对特定的子职位!)

警告:不要不要落入contains()的陷阱。此方法选择包含给定短语的所有元素。 .contains(1000) 也会选择 &lt;td&gt;10000&lt;/td&gt;。

【讨论】:

  • 谢谢。我在我的页面中添加了您的代码,但它不起作用。我使用此代码:var a = $("table td:last-of-type").filter(function () { return $(this).text() == "1000"; }).parent().find("input:first"); $(a).text("nima"); 。 last-of-type 是什么?
  • td:last-of-type 是一个 CSS 选择器,它选择每个 &lt;td&gt; 元素,它是其类型的最后一个,相对于其父元素。你能提供一个小提琴吗?
  • 您的代码包含空格。使用$.trim 删除开头和结尾的空格。此外,我的代码已经返回了一个 jQuery 对象,因此无需将其包装在另一个 jQuery 对象中。小提琴:jsfiddle.net/7qyFk/5
  • 谢谢它的工作,但它需要$ 来获取它的attr ;)。我想要一个通用的方法来做到这一点。last-of-type 是一个有限的解决方案。如果我的输入是在Desc2 列中如何选择?
  • 示例:选择第 5 行,第 2 单元格:$("table &gt; tr:nth-child(5) &gt; td:nth-child(2)")。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-03-14
  • 1970-01-01
  • 2021-12-06
相关资源
最近更新 更多