【问题标题】:How to display a single row in jtable based on user input?如何根据用户输入在jtable中显示单行?
【发布时间】:2014-06-05 11:28:47
【问题描述】:

我有两个相关的下拉列表,当用户选择第二个下拉列表的值并点击提交按钮时,我想提取所选选项的值(充当主键)并在 jtable 中显示其主键的整行key 是选择的值。

有人可以帮我解决这个问题吗?

【问题讨论】:

    标签: jquery jquery-jtable


    【解决方案1】:

    首先你的问题不清楚。您希望根据选择的选项在表中显示整行。 但是你有没有提到数据库在哪里?不管是oracle数据库还是你已经存储在一个数组中。

    无论如何,我假设您有一个名为“arr”的二维数组。 即使您有 oracle 表,请使用 PHP 并提取这些表值并将其保存在 2D 数组中。

    让我们举个例子,表格有 2 个属性 - 名称和价格,我们将从下拉列表中选择“名称”并在表格中打印名称和价格。

    这是下拉列表和表格定义的基本 HTML 代码 -

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="functions.js"></script>
    </head>
    <body>
    <select id="drop">
        <option value="Abc">ABC</option>
        <option value="Def">DEF</option>
        <option value="Ghi">GHI</option>
        <option value="Jkl">JKL</option>
    </select> 
    
    <table id="tblData">            
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    

    在function.js文件中,代码为-

    $(document).ready(function() {
       $('#drop').on('change', function() { 
       //check on selection of dropdown menu
    
       var name=$( "#drop" ).val();
       //saving value of dropdown in variable name
       var i;
       for(i=0;i<arr[0].length;i++)
        if(arr[i][0]==$name
            var price=arr[i][1];
       //saving price for corresponding name 
    
       $("#tblData tbody").append(
        "<tr><td>"+$name+"</td><td>"+$price+"</td></tr>
        "</tr>");
       //appending in table
       });
    });
    

    【讨论】:

    • 您好,非常感谢您的回复。这也是我关于stackoverflow的第一个问题,所以我很抱歉以不完整的方式发布问题。我正在使用 MySql 5.5 数据库和 java servlet。我正在使用 jquery 插件 jtable 来显示来自数据库的数据。这是插件的 API 参考:[jtable.org/ApiReference]。该插件使用列表操作来显示特定表中的所有值。我正在尝试使用该插件根据下拉列表中选择的选项的值仅显示表中的一行。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-10-16
    • 1970-01-01
    • 2012-05-13
    • 1970-01-01
    • 2015-05-15
    • 2013-07-22
    • 2021-07-27
    相关资源
    最近更新 更多