Javascript 如何从html表标记内部访问数据<；表>；并将其显示在表外_Javascript_Html_Jquery_Forms_Html Table

Javascript 如何从html表标记内部访问数据<；表>；并将其显示在表外

javascript html jquery forms

Javascript 如何从html表标记内部访问数据<；表>；并将其显示在表外,javascript,html,jquery,forms,html-table,Javascript,Html,Jquery,Forms,Html Table,我正在制作一个HTML表单，并在表单中使用表。数据完全显示在表单内部，但我想访问表中的一些数据并将其显示在表标记外部，我如何才能做到这一点？非常感谢你的帮助页面上的数据如下所示：但我想要这样的东西：访问表标记外侧的一列 .新的{ 浮动：右；宽度：98%；边际上限：0；右边距：20px；页边距底部：0；左边距：自动； } 德斯普先生{ 背景颜色：浅绿色；字体大小：12px；字体大小：正常； } 推广建议发票外艺术家作品回顾展产品代码外部条形码产品说明包装尺寸

我正在制作一个HTML表单，并在表单中使用表。数据完全显示在表单内部，但我想访问表中的一些数据并将其显示在表标记外部，我如何才能做到这一点？非常感谢你的帮助

页面上的数据如下所示：

但我想要这样的东西：访问表标记外侧的一列


.新的{
浮动：右；宽度：98%；
边际上限：0；
右边距：20px；
页边距底部：0；
左边距：自动；
}
德斯普先生{
背景颜色：浅绿色；
字体大小：12px；
字体大小：正常；
}


推广建议
发票外
艺术家作品回顾展
产品代码
外部条形码
产品说明
包装尺寸和重量
产品标准发票成本
奖金
净成本
复古奖金
在本栏中输入
在此列中输入外部条形码
输入完整的产品名称以及您想要的方式
包装尺寸和重量在这个盒子里或麻木
产品标准发票成本
怎么进入这里
网

在提供的代码示例中，我没有看到任何JS代码，但包含了jQuery和popper.JS，因此我假设没有尝试过任何代码，如果您已经尝试了一些东西，我们可以修改答案并对其进行增强

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

在表格标题中设置标识符，例如：

设置加载文档时激发的脚本

在表格前面设置一个

div

或另一个元素

您可以在脚本中获取

元素.innerText

或

元素.innerHTML

（如果需要格式化），其中

元素

是

th

设置div的

innerHTML

或

innerText

如果有更多项，请设置更多相应的div。如果您需要在特定位置的每个列的顶部添加这些元素，这会变得很棘手，但可以使用css网格之类的东西来完成

让我们知道进展情况。

第二个屏幕截图已被切断，请在有机会时更新。是否尝试将列标题从一个移动到另一个或完全移出表？请使用

.value（）

获取所需输入的值，然后使用

.text（）

将其显示在表外的DIV中。@Ramakay我正在尝试显示表中某列的信息，并将该信息显示在表外。谢谢！在：中指定id并使用函数getInnerText（）{alert（document.getElementById（“p_code”）.innerText）}时，只显示头的名称。我希望标签内有值，当使用ame id标签内没有显示任何内容时，请在原始答案中发布代码，以便我们可以进一步帮助您。谢谢。我设法做到了。通过使用var x=document.getElementById（“myid”）.value；document.getElementById（“demo”）.innerHTML=x；然后在div标记中调用它：

<!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>