如何在jsp中访问动态创建的文本框

时间:2011-03-12 19:04:22

标签: javascript jsp datagrid java-ee

我正在尝试创建自己的网格视图。在这里,我从db检索食物项目并将其存储到动态创建的表格中。这些表有很多行,所有行都有一个文本框来输入特定项的数量。我希望此文本框仅在选中复选框时启用。

如何执行此代码。

我用了整整一天的时间来搜索答案。我是j2ee应用程序的初学者。 请帮我。

请建议一些网站查找可访问和可编辑数据网格示例的脚本。

该jsp页面的代码如下:

<%@ page import="java.sql.*" %> 
<%@ page import="java.io.*" %>  
<html> <head><title>orderSample</title>

    <script language="JavaScript"> <!--

    function enable_text(status,i) { status=!status;  document.orderForm.NAME_TEXT('i').disabled
    = status;///////here is the problem. how to insert i here . i want to do something like this//// } //--> </script>

    </head> 
<body bgcolor="white"> 
<form method=post name=orderForm> 
<h1>Data from the table 'item details' of database 'caffe' in sql </h1> 
<% ResultSet r=null; r=(ResultSet)request.getAttribute("message"); System.out.println(r); int i = 0; %> 
<TABLE cellpadding="15" border="1" style="background-color: #ffffcc;">    <TR>
             <TD>ORDER ID</TD>
            <TD>ORDER PRICE</TD>
            <TD>Quantity</TD>
            <TD>Add Item</TD>
            </TR>
        <%do{

            System.out.println("I am in Ob");
        %>
        <TR>
            <TD><%=r.getString(1)%></TD>
            <TD><%=r.getString(2)%></TD>       
           <!--  <td><INPUT TYPE="TEXT" NAME="NAME_TEXT<%=i%>" VALUE="" IsEnabled="{Binding ElementName=checkBox1, Path=IsChecked}"/></td>-->
            <td><INPUT TYPE="TEXT" NAME="NAME_TEXT<%=i%>" VALUE="" /></td>
            <td><input type="checkbox" name="others<%=i%>" onclick="enable_text(this.checked,<%=i%>)"
    ></td>
        </TR>    <%i++; }while(r.next()); %>
        </TABLE>
        </form> 
</body> 
</html>

1 个答案:

答案 0 :(得分:2)

要使用JavaScript在同一表格行中使用复选框启用输入文本字段,最容易抓取jQuery

首先,给表行中的复选框和输入字段指定一个类名。

<td><input type="checkbox" class="add" /></td>
<td><input type="text" class="quantity" /></td>

然后,您可以使用jQuery

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(document).ready(function() {
        $('.add').click(function() {
            $(this).closest('tr').find('.quantity').attr('disabled', !this.checked);
        });
    });
</script>

这基本上告诉每个带有class="add"的复选框,点击它时应查找最近的父<tr>元素,然后找到class="quantity"元素,然后设置其disabled属性与复选框的选中状态相反。