定位一个HTML表,使行索引X位于页眉下方的显示顶部


Position a HTML table so that row index X is at top of display just below the header

使用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中。

希望这能帮助到别人。