Question

我在页面中有很多表单，每个表单都有几个输入。当您单击表单上的提交（例如Form0）时，输入将发送到Reassign.php，根据用户输入在DB中执行搜索，然后是div id =＆＃34; Cell0＆＃34;在页面表中重新加载Reassign.php回显的数据。

<script type="text/javascript">
$(document).ready(function(){
    $("#Form0").submit(function(){
        var MyVariables = $(this).serialize();
        $('#Cell00').load('Reassign.php?MyVariables=' + MyVariables);
        return false;
    });
});

$(document).ready(function(){
    $("#Form1").submit(function(){
        var MyVariables = $(this).serialize();
        $('#Cell10').load('Reassign.php?MyVariables=' + MyVariables);
        return false;
    });
});
</script>

表格的简化版本：

<table>                
  <tr>
    <td><div id="Cell00"><img src="Image0.jpg"/></div></td>
    <td><div id="Cell01">Text1</div></td>
    <td><div id="Cell02">Price1</div></td>
    <td><div>
             <form name="Form0" id="Form0">
                <input type="hidden" name="Qst" value="0">
                <input type="image" src="ReloadRed.gif" alt="Submit"/>
                <select name="cmb1"><option>cmb1Option1</option><option>cmb1Option2</option></select>
                <select name="cmb2"><option>cmb2Option1</option><option>cmb2Option1</option></select>
             </form>
          </div>
    </td>
  </tr>
  <tr>
    <td><div id="Cell10"><img src="Image0.jpg"/></div></td>
    <td><div id="Cell11">Text1</div></td>
    <td><div id="Cell12">Price1</div></td>
    <td><div>
             <form name="Form1" id="Form1">
                <input type="hidden" name="Qst" value="0">
                <input type="image" src="ReloadRed.gif" alt="Submit"/>
                <select name="cmb1"><option>cmb1Option1</option><option>cmb1Option2</option></select>
                <select name="cmb2"><option>cmb2Option1</option><option>cmb2Option1</option></select>
             </form>
          </div>
    </td>
  </tr>                      
</table>

示例Reassign.php：

<?php
  session_start(); 
  $MyVariables = $_GET['MyVariables '];
  $cmb1 = $_GET['cmb1'];
  $cmb2 = $_GET['cmb2'];
  $cmb3 = $_GET['cmb3'];
  parse_str($MyVariables);
  $Preg=$MyVariables;

 $link = mysql_connect("localhost", usr, pswrd) or die(mysql_error());
 @mysql_select_db("MyDB") or die( "Unable to select database"); 
 mysql_query ("SET NAMES 'utf8'");

$query = "SELECT Img FROM MyTable WHERE Column1=$cmb1 AND Column2=cmb2";
    if($success = mysql_num_rows($result) > 0) {    
       while ($row = mysql_fetch_array($result)) {
          $image="../ImageFolder/".$row[0].".png";
       }
    }         
echo "<img src=\"".$image."\" />";
?>

没关系。

现在我希望表中的其他单元格也可以更改，但是需要使用不同的（和相关的）数据。实际上，在Reassign.php的DB搜索中，$ row [0]在Cell00中被回显（并因此被加载），我希望$ row [1]被发送到Cell01，$ row [2]被发送到Cell02，依此类推。我的问题是，现在我正在加载Cell0来回显他们的内容。我想我可以完成这个工作，调用不同的php（Reassign0.php将数据回显到Cell00，Reassign1.php将数据回显到Cell01），但似乎很奇怪。有什么想法吗？

Answer 1

这是一种更好的方法......您可以使用PHP脚本回显JSON而不是HTML，包含该行的所有字段。（必须使用其他代码才能使其适用于您，我会让您自己研究）

echo json_encode($row);

在你的JS中，根据您的服务器配置获取$.getJSON(url, callback)或$.get(url, callback)的json

然后，遍历单元格并在回调中注入数据

$.getJSON('Reassign.php?MyVariables='+MyVariables, function(row){
  for(i=0;i<row.length;i++){
    $("#Cell0"+i).html(row[i]);
  }
});

编辑：如果您的数据尚未格式化为HTML（如图像），请务必在回调中执行此操作。例如，如果第一个元素始终是图像URL而其余元素是纯数据，则可以执行以下操作：

$.getJSON('Reassign.php?MyVariables='+MyVariables, function(row){
  for(i=0;i<row.length;i++){
    var content = ( i == 0 ) ? '<img src="'+row[i]+'" alt="" />' : row[i];
    $("#Cell0"+i).html(content);
  }
});

使用jQuery重新加载多个表格单元格

1 个答案: