php - 表 tr 未按预期正确替换

Question

我必须有一个 public_page.php 页面和一个 action.php 页面。如果用户按下 public_page.php 中的提交按钮，它会通过 jquery post 方法将信息发送到 action.php 页面。成功处理后，action.php 页面会发送一个 tr 数据，该数据应在 public_page.php 的表中替换。

page: public_page.php
<div id="result"></div>
<table>
 <thead><tr><th>S/N</th><th>Name</th><th>Address</th><th>Mobile</th><th>Action</th></tr></thead>
 <tbody>
    <tr id="1"><td>1</td><td>Mr.X</td><td>Japan</td><td>95684256</td><td><a class="edit" href="">Edit</a></td></tr>
    <tr id="5"><td>1</td><td>Mr.Y</td><td>USA</td><td>123856641</td><td><a class="edit" href="">Edit</a></td></tr>
    <tr id="8"><td>1</td><td>Mr.Z</td><td>UK</td><td>456862043</td><td><a class="edit" href="">Edit</a></td></tr>
 </tbody>
</table>

jquery 代码(此处没有 $(document).ready 行):

$("body").on("click",".edit",function(event){
  event.preventDefault();
  var url = 'action.php';
  var trid = $(this).closest('tr').attr('id');
    $.post(url,
    {
      trid: trid,
    },function(data){
        $("#result").html(data).show();
    });
});

之后表格行的数据进入'#result'div进行编辑。让。 tr id=5 (Y先生) 现在正在编辑。所以它出现在 #result div 中，如下所示:

<div id="result">
<form id="5000">
Name:<input type="text" name="name" value="Mr.Y" /><br />
Address:<input type="text" name="adrs" value="USA" /><br />
Mobile:<input type="text" name="mobile" value="123856641" /><br />
Age:<input type="text" name="age" value="30" /><br />
<input type="submit" value="Submit" />
</form>
</div>

现在，当用户编辑信息并按提交时，它会通过jquery将表单信息发送到action.php页面。 action.php 页面在做什么，在获取 trid (实际上是要编辑的数据库行的 id)后，它会处理数据并为 public_page.php 生成回调数据，如下所示:

page: action.php
echo '<div class="success_msg">Data Updated Successfully!</div>';
echo '<div class="trid">5</div>';
echo '<div class="trcontent"><tr id="5"><td>1</td><td>Mr.Y</td><td>Tokeyo</td><td>123856641</td><td><a class="edit" href="">Edit</a></td></tr></div>';

public_page.php 的 jquery 代码处理数据如下:

   var url = 'action.php';
    var id = $(this).closest('form').attr('id');
    var form_id = "#"+id ;
    var data = $(form_id).serializeArray();
    $.post(url,
      data,function(callbackdata){
        var msg = $(callbackdata).filter(".success_msg").html();
        var trid = $(callbackdata).filter(".trid").html();
        var trdata = $(callbackdata).filter(".trcontent").html();
        $("#result").html(msg).show();
        $('#'+trid).replaceWith(trdata);
    });

根据查询代码，它应该替换 id 为 5 的 tr。但是，虽然它替换了 tr，但不是表格格式，而是替换为文本格式，如下所示:

page: public_page.php
<div id="result"></div>
<table>
 <thead><tr><th>S/N</th><th>Name</th><th>Address</th><th>Mobile</th><th>Action</th></tr></thead>
 <tbody>
    <tr id="1"><td>1</td><td>Mr.X</td><td>Japan</td><td>95684256</td><td><a class="edit" href="">Edit</a></td></tr>
    1Mr.YTokeyo123856641<a class="edit" href="">Edit</a>
    <tr id="8"><td>1</td><td>Mr.Z</td><td>UK</td><td>456862043</td><td><a class="edit" href="">Edit</a></td></tr>
 </tbody>
</table>

我认为……没有插入替换的数据。

如何解决此问题，以便替换 tr id="5"后看起来像表格行，而不是字符串。

Answer 1

我建议进行编辑，以更简单的方式处理这个问题。

在您的 php 代码中，您应该返回的是数据，而不是返回 div。

<?php
$data = new stdClass();
$data->successMsg = 'Data Updated Successfully!';
$data->trid = 5;
$data->trContent = '<tr id="5"><td>1</td><td>Mr.Y</td><td>Tokeyo</td><td>123856641</td><td><a class="edit" href="">Edit</a></td></tr>';

echo json_encode($data);

然后在 JS 代码中，您可以直接访问数据，而不用从 HTML 中过滤数据。

$.post(url,
      data,
      function(callbackdata){
        var msg = callbackdata.successMsg;
        var trid = callbackdata.trid;
        var trdata = callbackdata.trContent;
        $("#result").html(msg).show();
        $('#'+trid).replaceWith(trdata);
      }, 
      'json');

您遇到问题的原因是 jQuery 处理无效 HTML 的方式。 <div><tr><td>1</td><td>2</td></tr></div>无效。

$('<div><tr><td>1</td><td>2</td></tr></div>').html() // outputs `12`