使用jQuery重新加载多个表格单元格 - reload multiple table cells with jQuery

我在一个页面中有许多表单，每个表单都有几个输入。当您在表单(例如Form0)上单击Submit时，输入将发送到Reassign.php, Reassign.php根据用户输入在DB中执行搜索，然后在页面的表中使用div id="Cell0"的单元格重新加载由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， $row[0]回显(因此加载)在Cell00，我希望$row[1]被发送到Cell01， $row[2]到Cell02等。我的问题是，现在我正在加载Cell0响应他们的内容。我想我可以做的工作调用不同的php (Reassign0.php回显数据到Cell00, Reassign1.php回显数据到Cell01)，但似乎相当奇怪。什么好主意吗?

这是一个更好的方法…您可以从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);
  }
});