何从 html 表标签内部访问数据<div id="text_translate"><p>我正在制作一个 HTML 表格并在表格内使用表格。 数据在表格内完美显示，但我想从表格中访问一些数据并将其显示在表格标签之外，我该怎么做？ 非常感谢您的帮助</p><p>页面上的数据显示如下：</p><p> <a href="https://i.stack.imgur.com/CytCE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CytCE.png" alt="这就是桌子的样子"></a></p><p> 但我想要这样的东西：访问边表标签中的一列<a href="https://i.stack.imgur.com/VMST5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VMST5.png" alt="像这样"></a></p><pre> <: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></pre></div>并将其显示在表格之外<table> </table>
[英]Ho to access the data from inside html table tags <table> and display it outside of table
问题描述
我正在制作一个 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>
1 个解决方案
解决方案1
1 已采纳 2020-08-06 14:56:46
在提供的代码示例中，我没有看到任何 JS 代码，但包括 jQuery 和 popper.js，所以我假设没有尝试过，如果您已经尝试过并增强它，我们可以修改答案。
有多种方法可以做到这一点，但一种方法可能是：
- 在表格标题中设置标识符，例如：
<th id='retro-bonus'...> - 设置在加载文档时触发的脚本
- 在表格之前设置一个
div或其他元素 - 您可以在脚本中获取
element.innerText或element.innerHTML（如果需要格式化），其中element是th。 - 设置你的 div 的
innerHTML或innerText
如果你有更多的项目，设置更多对应的div。 如果您需要在特定位置的每个列的顶部使用这些，它会变得很棘手，但可以使用 css 网格之类的东西来完成。
让我们知道怎么回事。
通过Javascript访问HTML表格中的标签
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.