PHP - 更新动态 HTML 表中的一行

Question

我有一个用 HTML 创建的动态表：

<table id="rounded-corner" width="51%" border="1" align="center" cellpadding="2" cellspacing="0">
  <tr>
    <th width="19%">Job Type</th>
    <th width="24%">Job Description</th>
    <th width="19%">Type of Piping</th>
    <th width="19%">Scheduled Start Time</th>
    <th width="19%">Scheduled End Time</th>
  </tr>
  <?php do { ?>
    <tr>
      <td nowrap><?php echo $row_selectJobs['JobType']; ?></td>
      <td><?php echo $row_selectJobs['JobDesc']; ?></td>
      <td><?php echo $row_selectJobs['PipeType']; ?></td>
      <td align="center"><?php echo substr($row_selectJobs['TimeStart'],0,-3); ?></td>
      <td align="center"><?php echo substr($row_selectJobs['TimeEnd'],0,-3); ?></td>
    </tr>
  <?php } while ($row_selectJobs = mysql_fetch_assoc($selectJobs)); ?>
</table>

我想知道是否有一种方法可以为每一行添加一个按钮，以便您可以修改该行的内容。请记住，这是一个动态表。我是 PHP 新手，我真的只是从 Dreamweaver 中窃取了这段代码，并根据自己的需要对其进行了修改。

Answer 1

jQuery 很容易做到这一点。在您的 do 循环中，只需添加另一个 TD 并使用 echo 输出类似

<input type='button' class='changeRow' value='Edit' />

对于其他每个 TD，您首先要输出一个跨度内的值，其类名类似于

<span class="labelValue">..What your PHP actually outputs..</span>

然后是隐藏的文本框，或者类似的东西，具体取决于您实际进行编辑的方式。每个都有一个与该行相关的 className。所以

<input type='text' class='editInput' value='' style='display: none;'/> etc...

然后使用 jQuery，您可以将它们链接在一起以使其可编辑

$(document).ready(function(){
$('.changeRow').click(function(){
    var tb = $(this).parents('tr').find('input.editInput');
    var label = $(this).parents('tr').find('span.labelValue');
    if($(this).val() == 'Edit'){
        tb.val(label.html());
        label.hide();
        tb.show();
                    $(this).val('Save');
    }
    else{
        label.html(tb.val());
        tb.hide();
        label.show();
                    $(this).val('Edit');
    }
});
});

所以当你的 HTML 被输出时，它看起来像这样

  <td> <!-- The extra td for your edit button -->
      <input type="button" class="changeRow" value="Edit">Some Job Type</span>
  </td>
  <td nowrap>
      <span class="labelValue">Some Job Type</span>
      <input type="text" class="editInput" value="" style="display: none;" />
  </td>