how to check a condition for a <td> value in a table depending on its table header

user_2564537 0
Viewed 551

I want to change th, td values-based values ..suppose align numbers to right(except s.no) and text to left.

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

my Html code is bellow and these data getting dynamically ...

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

my print section code is 

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();
}

my output screen enter image description here

could u please suggest me how to show align of numbers to right(except s.no) and text to left.

bootstrap-4 printing css html
1 Answers

well I could not find any css selector for selecting specific cells with numbers in them. That's why I've made a javascript function to check whether the cellmate can be converted to a number or not with !isNaN(col.innerText). Just call the styleTable function whenever you need it.

The following snippet contains an example based on the by you provided code.

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>

Hope this helps!

Edit:

Provided a more dynamic way of styling each cell accordingly.

user_89024400
Related