如何在基于html表格的JQuery中选择表单元素？

我正在研究一些涉及一些动态生成的ASP.NET Web表单，并且我需要在客户端添加一些onClick帮助器。除了一个巨大的问题，我有一个工作的基本轮廓。如何在基于html表格的JQuery中选择表单元素？

有多个HTML表格，每个HTML表格由不同的ASP.NET Web控件生成。每个表都可以包含重叠的字段名称，这会对我的JQuery单击事件处理程序造成问题。点击事件处理程序链接到意想不到的表单字段以及预期的表单字段。

我提供了以下代码的简化示例版本。此代码尝试设置textbox box1的值，当id = thing1的表中选择了特定的单选按钮时。很显然，jQuery代码将触发两个表中的表单字段。

表格根据不同的条件动态添加到网页中。可能没有加载表，只有一个表或两个表都可能加载。将来可以添加其他表格。每张表来自不同的.net网页控制。

除了重命名表单字段以确保它们在所有用户控件中都是唯一的，有没有办法让JQuery只对预期的表单字段起作用？换句话说，表ID可以以不会成为噩梦维护的方式并入JQuery代码中吗？

<script> 
    $(document).ready(function() { 
     $("[id$=radio1_0]").click(function() { 
     $("[id$=box1]").attr("value", ""); 
     }); 
     $("[id$=radio1_1]").click(function() { 
     $("[id$=box1]").attr("value", "N/A"); 
     }); 
    </script> 

    <table id="thing1"> 
     <tr><td> 
     <radiobuttonlist id="radio1"/> 
      <listitem>yes</listitem> 
      <listitem>no</listitem> 
     </td></tr> 
     <tr><td> 
     <textbox id="box1"/> 
     </td></tr> 
    </table> 

    <table id="thing2"> 
     <tr><td> 
     <radiobuttonlist id="radio1"/> 
      <listitem>yes</listitem> 
      <listitem>no</listitem> 
     </td></tr> 
    <tr><td> 
     <textbox id="box1"/> 
    </tr></td> 
    </table>

来源

2010-05-13 Swoop

我假设你不会尝试重复使用相同的id，比如'radio1'和'box1'。你的选择器'$（“[id $ = radio1_0]”）'让我相信它们将在末尾用'_0'编号进行修改。 – user113716 2010-05-13 20:12:20

@patrick：id将被重用。该id是每个用户控件唯一的，但可以由不同的用户控件重用。因此，呈现的html页面上可能有几个radio1和box1表单域。这是问题的关键。 – Swoop 2010-05-13 20:33:36

是的，这是一个问题。不允许使用相同的ID。您可以使用'radio1_0'和'radio1_1'，但不能使用radio1，然后再使用radio1。如果你确实使用'radio1_0'和'radio1_1'，那么选择器'$（“[id $ = radio1]”）'会选择它们，你可以遍历正确的相对'textbox'。 – user113716 2010-05-13 20:50:09

有几种方法可以使用jQuery遍历DOM，因此您可以获得对相应正确元素的引用。

一种方法是遍历到父table元素，然后.find()您正在寻找的相关元素。

<script> 
    $(document).ready(function() { 
     $("[id$=radio1_0]").click(function() { 
      $(this).closest('table').find("[id$=box1]").attr("value", ""); 
     }); 
     $("[id$=radio1_1]").click(function() { 
     $(this).closest('table').find("[id$=box1]").attr("value", "N/A"); 
     }); 
    }); 
    </script>

来源

2010-05-13 19:55:29 user113716

应用类的表，然后指定你的jQuery选择寻找表单字段特定的表，例如内我认为这将工作

$(".table1 [id$=radio1_0]")

然后你只需要设置相关控件的CSS类属性。

来源

2010-05-13 19:54:02

如何在基于html表格的JQuery中选择表单元素？

回答

相关问题