使用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>
给您的表行ID的
<tr id="Item-<?=$item['item_id']?>">
然后用URL 中的id重新加载
http://example.com/segment1/segment2/#Item-123
这将使浏览器滚动到表格的右侧行。
希望这能有所帮助——祝你好运!
好吧,我用Steven M和José的想法解决了这个问题。谢谢你们两个。
我正在使用Chrome浏览器。
我做了什么,
使用HTML和CSS。
首先,我捕获了表行的行id,并将其存储在cookie中。第二,在重新加载表时,我根据cookie中存储的行id测试了当前表的行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中。
希望这能帮助到别人。