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>