如何根据用户输入在jtable中显示单行?

时间:2014-06-05 11:28:47

标签: jquery jquery-jtable

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

有人可以帮帮我吗?

1 个答案:

答案 0 :(得分:0)

首先你的问题不清楚。您希望根据所选的选项显示表中的整行。 但你还没有提到数据库在哪里?是否有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
   });
});