jquery .children()选择器:表格中的表格

时间:2011-05-06 04:54:22

标签: jquery jquery-selectors

我认为这应该是一个简单的问题 - 有人告诉我我正在犯的明显错误!

我有一个简单的html表单:

<form action="/api/userattributes" method=get>
<select name=action>
<option>read_by_user</option>
<option>set</option>
<option>delete</option>
</select>
Attrib Name: <input name=name type=text size=20 value="">
Attrib Value: <input name=value type=text size=50 value="">
<br />
<input type=submit name="Go!">
</form>

一个简单的jquery函数,想要在提交之前触摸表单中的一些输入字段:

$(function()
{
    $("form").submit(function()
    {
        $(this).children(':input[value=""]').each(
            function() {
                $(this).attr("disabled", "disabled");
        });
        return true; // ensure form still submits
    });
});

这样可行。但如果我用表格格式化表单,我的函数不再做任何事情。嗯,我想,也许问题是表单的子元素是表元素(虽然这看起来很奇怪),所以我尝试了.find()而不是.children(),它再次与vanilla版本一起工作但不是表版本。

那么如果表格在表格中,我如何找到表格字段呢?

1 个答案:

答案 0 :(得分:4)

你可以发布你的table代码吗,因为我猜测了你会使用的一些表格布局并且很快就有了一个工作示例:http://jsfiddle.net/3wCk9/

注意我发现了两个错误:

  1. 您的选择器为':input[value=""]',我将其更改为'input[value=""]'
  2. 您怀疑需要使用find而不是children
  3.   

    给出一个代表的jQuery对象   一组DOM元素,.children()   方法允许我们搜索   这些元素的直接孩子   在DOM树中

    来源:http://api.jquery.com/children/

    修改

    听起来你发现了自己的解决方案,我想我最好把它包含在这里作为参考。

    您正在使用:

    <table>
      <form>
        <tr>
           <td>
             <input>
           </td>
        </tr>
      </form>
    </table>
    

    您应该切换<form><table>(正如您所做的那样),以便<table>嵌套在form内。

    正如您所发现的,您不能在<table>内自由拥有元素(一切都必须在行和列中)。结果,虽然行和列似乎位于form内,但事实证明它们实际上并没有嵌套在其中,因此不在{{1方法搜索。