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

PHP - UPDATE a row in a dynamic HTML table

本文关键字：一行 更新 动态 HTML PHP      更新时间：2023-09-26

我在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中偷了这段代码，并根据自己的需要进行了修改。

使用jQuery完成这个任务非常简单。在do循环中添加另一个TD并使用echo输出类似

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

对于其他的TD，你首先需要在一个类名类似

的span中输出值
<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>
相关文章：