表行值根据选择下拉jquery ajax php改变 - Table row Values changes based on selected drop down jquery ajax php

我正在尝试创建一个包含总数和转换总价值的表单的页面。这个总和是由php中的do while循环生成的。最上面是货币贬值。当我从下拉菜单中选择任何货币时，页面将以ajax模式重定向到另一个名为currency1.php的php页面，并从currency1.php获得所需的值，并在转换总价值中填充适当的值。以下是标记页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Get Currency Values</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#cur').change(function() {
                $.get('currency1.php', {
                    cur: $(this).val()
                }, function(data) {
                    $('#emp_id').val(data);
                });
            });
        });
    </script>
</head>
<body>
    <table border=1>
        <tr>
            <td colspan=3>
                <select name="cur" id="cur">
                    <option value="1">US Dollar</option>
                    <option value="2">Indian Rupee</option>
                    <option value="3">British Pound</option>
                    <option value="4">Euro</option>
                    <option value="5">Singapore Dollar</option>
                    <option value="6">Australian Dollar</option>
                    <option value="7">Canadian Dollar</option>
                    <option value="8">Swiss Franc</option>
                    <option value="9">Japanese Yen</option>
                    <option value="10">Malaysian Ringgit</option>
                    <option value="11">South African Rand</option>
                </select>
                <input type="text" name="emp_id" id="emp_id" />
            </td>
            {Do while loop in PHP}
            <tr>
                <td><b>Total Value</b>
                </td>
                <td><b>Converted Value</b>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="box1" id="box1" value="1000">
                </td>
                <td>
                    <input type="text" name="con_ver1" id="con_ver1" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="box2" id="box2" value="2200">
                </td>
                <td>
                    <input type="text" name="con_ver2" id="con_ver2" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="box3" id="box3" value="900">
                </td>
                <td>
                    <input type="text" name="con_ver3" id="con_ver3" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="box4" id="box4" value="3200">
                </td>
                <td>
                    <input type="text" name="con_ver4" id="con_ver4" />
                </td>
            </tr>
            <tr>
                <td colspan=2>The Records continues..........</td>
            </tr>
            {end of php do while loop}
    </table>
</body>
</html>

我的currency1.php这是得到ajax查询如下:该页应该返回数组的结果到上一页。我不知道如何在数组中实现这一点，并返回ajax的结果。Currency1.php如下:

 <?php
 include('config.php');
$sql = "select rate from currency1 where currency='INR' LIMIT 1";
$result_gt = mysql_query($sql) or die($sql."<br/><br/>".mysql_error());
$list_gt = mysql_fetch_array($result_gt);
$inrvalue=$list_gt['rate'];

 if(isset($_REQUEST['cur'])){
  // connection should be on this page  
     $sql = mysql_query("select currency,rate from currency1 where id =".$_REQUEST['cur']);
     $res = mysql_fetch_assoc($sql);
     $rate=$res['rate'];
  //$gt=($inrvalue*10)/$res['rate'];
  //$gt=($inrvalue*10)/$res['rate'];
  //$gt=($inrvalue/$rate)*total[$i];
  $gt=($inrvalue/$rate);
   echo json_encode($gt);die;
  }
  ?>

我的编码正确吗?还有其他的方法可以达到同样的效果吗?我是说只用javascript?请帮帮我。

基本概念

你应该重写你的success函数，而不是:

function(data) {
    $('#emp_id').val(data);
});

放置一些解析json并生成表内容的代码，例如:

function(data) {
    var content_table = '';
    var array_data = JSON.parse(data);
    for(var i=0; i<array_data.length; i++){
        var line_content = array_data[i];
        //TODO: set up correctly the line content...
        var line_html = '<td>'+line_content+'</td>';
        //...once done, append to the html
        content_table+='<tr>'+line_content+'</tr>';
    }
    //update table body (do not reload the full page)
    $('tbody').html(content_table);
});

更好的方法，使用库

根据库文档，你可以直接加载json:

$(selector_datatable).dataTable( {
    "ajax": '../ajax/data/arrays.txt'
} );

对于您的情况，该文件是由php脚本生成的。

缺陷是每个浏览器都会看到相同的结果，因为你加载了一个硬集文件。

要为所有用户获得个性化的体验，您可以为每种货币生成一个文件，或者使用真正的ajax。

祝你好运!