个人中心
gpt4 book ai didi

html - 如何根据表头检查表中 值的条件

转载 作者：行者123 更新时间：2023-12-05 07:08:06 25 4
gpt4 key购买 nike

我想更改基于 th、td 值的值..假设数字向右对齐(s.no 除外)，文本向左对齐。

 <button type="submit" class="btn btn-raised btn-primary mr-5"
   (click)="productPrintSection('productSection')">
     <i class="fa fa-check-square-o"></i> Print
    </button>

我的 Html 代码如下，这些数据动态获取......

 <div id="invoice-items-details" class="pt-2">
  <div class="row">
 <div class="table-responsive col-sm-12">
   <table class="table">
    <thead>
     <tr>
     <th 
     *ngFor="let column of productColumns">
       {{column.name}}
     </th>
     </tr>
    </thead>
    <tbody>
    <tr  *ngFor="let list of productSource; let i=index">
     <td 
        *ngFor="let column of productColumns">
           {{ list[column['value']] }}
      </td>
      </tr>
     </tbody>
     </table>
    </div>
   </div>

我的打印部分代码是

productPrintSection = function (reportSection) {
    let printContents, popupWin;
    printContents = document.getElementById(reportSection).innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
    <html>
    <head>
    <style>
      body { width: 99%;}
        h1 {
             text-align:center;
           }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
           }
        label { font-weight: 400;
                font-size: 13px;
                padding: 2px;
                margin-bottom: 5px;
              }
        table, td, th {
                        border: 1px solid silver;
                      }
                table td {
                          text-align: center;
                          font-size: 13px;
                         }

                 table th {
                          font-size: 13px;
                          }
        table {
                border-collapse: collapse;
                width: 98%;
              }
        th    {
                height: 26px;
              }
    </style>
    </head>
            <body onload="window.print();window.close()">${printContents}</body>
    </html>`
    );
    popupWin.document.close();
}

我的输出屏幕 enter image description here

能否建议我如何显示数字向右对齐(s.no 除外)和文本向左对齐。

最佳答案

好吧，我找不到任何用于选择其中包含数字的特定单元格的 css 选择器。这就是为什么我制作了一个 javascript 函数来检查狱友是否可以使用 !isNaN(col.innerText) 转换为数字。只需在需要时调用 styleTable 函数即可。

以下代码段包含一个基于您提供的代码的示例。

var table = document.getElementById("products");

window.onload = function() {
  styleTable(table)
};


function styleTable(table) {

  //loop through the second row to check what kind of value they have
  for (var i = 1, row; row = table.rows[i]; i++) {
    //exclude the first column "S.no"
    for (var j = 1, col; col = row.cells[j]; j++) {
      //check if the column value is a number
      if (!isNaN(col.innerText)) {
        col.style.textAlign = "right";
      }
    }

  }
}
body {
  width: 99%;
}

h1 {
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

label {
  font-weight: 400;
  font-size: 13px;
  padding: 2px;
  margin-bottom: 5px;
}

table,
td,
th {
  border: 1px solid silver;
}

table td {
  text-align: center;
  font-size: 13px;
}

table th {
  font-size: 13px;
}

table {
  border-collapse: collapse;
  width: 98%;
}

th {
  height: 26px;
}
<table id="products">
  <tr>
    <th>S.no</th>
    <th>Product Name</th>
    <th>Product code</th>
    <th>Purity</th>
    <th>Store</th>
    <th>city</th>
    <th>state</th>
    <th>quantity</th>
    <th>weight</th>
    <th>total</th>
    <th>total orders</th>
  </tr>
  <tr>
    <td>1</td>
    <td>xyzzy</td>
    <td>1001010</td>
    <td>54.00</td>
    <td>Default</td>
    <td>Hyderabad</td>
    <td>dashdsaf</td>
    <td>10</td>
    <td>2135.5000</td>
    <td>239280324.09</td>
    <td>12</td>
  </tr>
  <tr>
    <td>2</td>
    <td>xyzzy</td>
    <td>1001010</td>
    <td>54.00</td>
    <td>Default</td>
    <td>Hyderabad</td>
    <td>adsfsdf</td>
    <td>0</td>
    <td>2135.5000</td>
    <td>239280324.09</td>
    <td>13</td>
  </tr>
</table>

希望这对您有所帮助!

编辑:

提供了一种更动态的方式来相应地设置每个单元格的样式。

关于html - 如何根据表头检查表中 <td> 值的条件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61947948/

25 4 0
文章推荐： react-native - React Native Tab 嵌套到 Stack 导航 v5 - 更新标题的最佳实践
文章推荐： tensorflow - 在 tensorflow 中，对于在实例化时需要参数的自定义层，get_config 方法是否需要覆盖？
文章推荐： python - Scipy 整合 : is solve_ivp "always worse" than odeint?
文章推荐： git - 如何获取凭据以从应用程序访问 Azure DevOps Git 存储库？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com