使用Codeigniter框架，我正在使用PHP foreach循环加载HTML表。该表最终可能有很多行。每行都有一个索引。该表是可滚动的，以便用户可以访问在加载表时不可见的行。用户可以编辑特定的行。
目前，在执行编辑后，我正在重新加载表，以便用户可以看到他的更改。但是，从行索引1开始加载表;这意味着编辑的行索引X可能不在屏幕上，用户需要滚动才能再次找到它。
我希望能够加载表，以便编辑的行（行索引x）显示在显示的顶部。用户仍然可以向前或向后滚动以访问前一行或将来的行。
我搜索得很长很难，却找不到任何帮助;也许我的术语是错的。我倾向于在没有jquery的情况下这样做，因为我只想使用纯HTML，PHP，CSS。
任何帮助都将不胜感激。
<div id="register_wrapper">
<!-- Show item entry box -->
<?php echo form_open( "receivings/add",array( 'id'=>'add_item_form')); echo form_input(array('name'=>'item','id'=>'item','size'=>'60')); ?>
</form>
<!-- Receiving Items List -->
<table id="register">
<thead>
<tr>
<th style="text-align:left;">
<?php echo $this->lang->line('common_delete'); ?>
</th>
<th style="text-align:center;">
<?php echo $this->lang->line('DynamicKit'); ?>
</th>
<th style="text-align:center;">
<?php echo $this->lang->line('items_category'); ?>
</th>
<th style="text-align:center;">
<?php echo $this->lang->line('items_item_number'); ?>
</th>
<th style="text-align:center;">
<?php echo $this->lang->line('sales_item_name'); ?>
</th>
<th style="text-align:right;">
<?php echo $this->lang->line('recvs_cost'); ?>
</th>
<th style="text-align:right;">
<?php echo $this->lang->line('sales_edit'); ?>
</th>
<th style="text-align:right;">
<?php echo $this->lang->line('sales_quantity'); ?>
</th>
<?php if ($mode !='purchaseorder' ) { ?>
<th style="text-align:center;">
<?php echo $this->lang->line('items_dluo'); ?>
</th>
<?php } ?>
<th style="text-align:right;">
<?php echo $this->lang->line('sales_discount'); ?>
</th>
<th style="text-align:right;">
<?php echo $this->lang->line('sales_total'); ?>
</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $newcart='N' ; if(count($cart)==0) { $newcart='Y' ; ?>
<tr>
<td colspan='11'>
<div class='warning_message' style='padding:7px;'>
<?php echo $this->lang->line('sales_no_items_in_cart'); ?>
</div>
</tr>
</tr>
<?php } else { // if entire receipt do not reorder the cart; otherwise show in reverse order so that newly added items come out on top switch ($data[ 'entire_receipt']) { case 'Y': $foreach=$ cart; break; case 'N': default: $foreach=a rray_reverse($cart,
true); } // read cart foreach ($foreach as $line=>$item) { // get item info $cur_item_info = $this->Item->get_info($item['item_id']); // point out that this is a dynamic kit constructed at run time. Let the user enter the parts // making up the kit and thier price $DynamicKit_settext = ' '; if
($cur_item_info->DynamicKit == 1) { $DynamicKit_settext = 'OUI'; } else { $DynamicKit_settext = ' '; } echo form_open("receivings/edit_item/$line"); ?>
<tr>
<!-- Output delete button -->
<td>
<?php echo anchor( "receivings/delete_item/$line", '['.$this->lang->line('common_delete').']');?>
</td>
<!-- Output Dynamic Kit indicator -->
<td style="align:center;font-weight:bold;color:#161FDA">
<?php echo $DynamicKit_settext ?>
</td>
<!-- Output category -->
<td style="text-align:center;">
<?php echo $item[ 'category']; ?>
</td>
<!-- Output item number -->
<td style="text-align:center;">
<?php echo $item[ 'item_number']; ?>
</td>
<!-- Output decription and qty in stock -->
<td style="text-align:center;">
<?php echo $item[ 'name']; ?>
</td>
<?php if ($items_module_allowed) { ?>
<td style="text-align: right">
<?php echo form_input(array( 'name'=>'price', 'value'=>$item['price'], 'style'=>'text-align:right', 'size'=>'6')); ?>
</td>
<?php } else { ?>
<td style="text-align: right">>
<?php echo $item[ 'price']; ?>
</td>
<?php echo form_hidden( 'price',$item[ 'price']); ?>
<?php } ?>
<!-- output update item box -->
<td style="text-align: right">
<?php echo form_submit( "edit_item", $this->lang->line('sales_edit_item'));?>
</td>
<!-- Output quantity -->
<td style="text-align: right">
<?php echo form_input(array( 'name'=>'quantity', 'value'=>number_format($item['quantity'], 2), 'style'=>'text-align:right', 'size'=>'3')); ?>
</td>
<!-- Output DLUO -->
<?php if ($mode !='purchaseorder' ) { ?>
<td style="text-align: center">
<?php if ($cur_item_info->dluo_indicator == 'Y') { echo anchor ( 'items/dluo_form/'.$cur_item_info->item_id.'/DR', $this->lang->line('items_dluo') ); } else { echo ' '; } ?>
</td>
<?php } ?>
<!-- output discount field -->
<td style="text-align: right">
<?php echo form_input(array( 'name'=>'discount', 'value'=>$item['discount'], 'style'=>'text-align:right', 'size'=>'3')); ?>
</td>
<!-- output price field without tax -->
<td style="text-align: right">
<?php echo to_currency($item[ 'price']*$item[ 'quantity']-$item[ 'price']*$item[ 'quantity']*$item[ 'discount']/100); ?>
</td>
</tr>
<tr style="height:3px">
<td colspan=10 style="background-color:#EEFFFF"></td>
</tr>
</form>
<?php } } ?>
</tbody>
</table>
</div>
答案 0 :(得分：0)
为表格行提供ID＆＃39; s
<tr id="Item-<?=$item['item_id']?>">
然后使用网址
中的ID重新加载http://example.com/segment1/segment2/#Item-123
这应该使浏览器滚动到表格的右侧。
希望这会有所帮助 - 祝你好运！
答案 1 :(得分：0)
好的，我用Steven M和José的想法解决了这个问题。感谢你们俩。
我正在使用Chrome作为浏览器。
我做了什么，
使用HTML和CSS。
首先我捕获了表行的行ID，我将其存储在cookie中。 其次，在表重新加载时，我测试了当前表行ID与存储在cookie中的行ID。 第三，如果相同，我将CSS ID应用于'tr'标签，以便更改表格行的背景颜色。 第四，如果相同，我使用'td'标签将自动对焦应用于其中一个输入字段。
我取得的成就，
1）突出显示更改的表行，以向用户显示他更改的表行 2）表格行现在在视口中可见，即使用户必须滚动到它。它的自动对焦功能正常。
以下是tr标签视图中的代码
// colour the line I just processed.
if ($_SESSION['line'] == $line)
{
?>
<tr id="line_colour">
<?php
}
else
{
?>
<tr >
<?php
}
?>
以下是td标记的代码
if ($_SESSION['line'] == $line)
{
?>
<td >
<?php echo form_input(array(
'name' => 'quantity',
'value' => number_format($item['quantity'], 2),
'style' => 'text-align:right;background:pink',
'size' => '3',
'autofocus' => 'autofocus'
));
?>
</td>
<?php
}
else
{
?>
<td style="text-align: right">
<?php echo form_input(array(
'name'=>'quantity',
'value'=>number_format($item['quantity'], 2),
'style'=>'text-align:right',
'size'=>'3'));
?>
</td>
<?php
}
?>
这是CSS，
tr#line_colour
{
background-color:lightgreen;
border-radius:8px;
}
我将行号存储在控制器的cookie中。
希望这有助于某人。