何从 html 表格标签 <table> 内部访问数据并将其显示在表格之外答案

【问题标题】：Ho to access the data from inside html table tags <table> and display it outside of table何从 html 表格标签 <table> 内部访问数据并将其显示在表格之外
【发布时间】：2020-11-26 20:41:33
【问题描述】：

我正在制作一个 HTML 表单并在表单中使用表格。数据在表格内完美显示，但我想从表格中访问一些数据并将其显示在表格标签之外，我该怎么做？非常感谢您的帮助

页面上的数据是这样显示的：

但我想要这样的东西：访问边表标签之外的列之一

<!DOCTYPE html>
<html>
<head> 
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</head> 
 <style>

.new {
    float:right; width:98%;
   margin-top:0;
margin-right:20px;
margin-bottom:0;
margin-left:auto;
}

.descp{

background-color:lightgreen;
font-size: 12px;
font-weight: normal;

}
  
</style>
<br> 

<div class= "head new">

   <center> <h1> PROMOTION PROPOSAL </h1> </center>
 
    </div>

<div id="container" class="new">
<table table id="example"  class="table table-bordered table-striped " style="width:100%" >
    <col style="width:14%">
    <col style="width:9%">
    <col style="width:15%">
     <col style="width:8%">
    <col style="width:6%">
    <col style="width:6%">
     <col style="width:6%">
    <col style="width:6%">

  <thead>
<tr>
                <th colspan="5"></th>
                <th style="background-color:powderblue;text-align:center;"colspan="2">OFF INVOICE</th>
                <th style="background-color:powderblue;text-align:center;"colspan="3">RETROSPECTIVE</th>
                <th colspan="2"></th>
            </tr>


    <tr>
      <th>Product Code</th>
      <th>Outer Barcode</th>
      <th>Product Description</th>
      <th>Pack Size & Weight</th>
      <th>Standard Invoice Cost of Product</th>
      <th>Bonus</th>
      <th>Net Cost</th>
      <th>Retro Bonus</th>
   
      
    </tr>
     <tr>
                
                <th class="descp" colspan="1">Enterde in this column</th>
                <th class="descp" colspan="1">Enter your OUTER barcode in this column</th>
                <th class="descp" colspan="1">Enter the full product name with how you would like</th>
                <th class="descp" colspan="1">Pack size & weight in this box or numb</th>
                <th class="descp"colspan="1">Standard invoice cost of product</th>
                <th class="descp" colspan="1">Enter here how</th>
                <th class="descp" colspan="1">Net</th>

               
            </tr>

  </thead>
  <tbody>
    <tr>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="Off Invoice example -CRG123" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="50212341234" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="Brand Name Crunchy Cornflakes" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="£25 x 250g" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="£3.05" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="£0.5" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="£2.55" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="" required></td>
      

    </tr>
    <tr>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="Retro Example - CRG321" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="50312341234" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="Brand Name Large Jam Tart" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="1 x 10 Pre Portioned" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="£6.00" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="" required></td>
      <td><input type="text" class="form-control" name="your_name[0]" placeholder="£0.50" required></td>
     
    </tr>
   
  </tbody>
</table>
</div>

【问题讨论】：

第二张截图被截断，有机会请更新。您是想将列标题从一个移到另一个还是完全移出表格？
使用.value()获取你想要的输入值，然后使用.text()在表格外的DIV中显示。
@Ramakay 我正在尝试显示表格中某一列的信息，并将该信息显示在表格之外。

标签： javascript html jquery forms html-table

【解决方案1】：

在提供的代码示例中，我没有看到任何 JS 代码，但包括 jQuery 和 popper.js，所以我假设没有尝试过，如果您已经尝试过，我们可以修改答案并增强它。

有多种方法可以做到这一点，但一种方法可能是：

在表格标题中设置标识符，例如：<th id='retro-bonus'...>
设置在加载文档时触发的脚本
在表格之前设置div 或其他元素
您可以在脚本中获取element.innerText 或element.innerHTML（如果需要格式化），其中element 是th。
设置您的 div 的 innerHTML 或 innerText

如果你有更多的项目，设置更多对应的div。如果您需要在特定位置的每个列的顶部使用它们，这会变得很棘手，但可以使用诸如 css 网格之类的东西来完成。

告诉我们进展如何。

【讨论】：

谢谢！当在中给出 id 时：并使用然后在 div 标签中调用它：