php - 放置一个 HTML 表格，使行索引 X 位于标题正下方的显示顶部

Question

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

Answer 1

给你的表格行 ID

<tr id="Item-<?=$item['item_id']?>">

然后用URL中的id重新加载

http://example.com/segment1/segment2/#Item-123

这应该使浏览器滚动到表格的右行。

希望这对您有所帮助 - 祝您好运!