A method for evaluating the condition of a <td> value in a table based on its corresponding table header

Question

A method for evaluating the condition of a <td> value in a table based on its corresponding table header

I am looking to modify the th and td values in my HTML code. Specifically, I want to align numbers to the right (except for s.no) and text to the 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>

The following is my HTML code, where the data is dynamically populated:

 <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 as follows:

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

Here is a link to view my output screen:https://i.sstatic.net/CJTg8.jpg

Can you please advise me on how to align numbers to the right (except for s.no) and text to the left?

html css printing bootstrap-4

Answer 1

Answer №1

After not being able to find a CSS selector for targeting cells with numbers in them, I decided to create a JavaScript function that checks if the content of a cell can be converted into a number using !isNaN(col.innerText). Simply invoke the styleTable function whenever it is needed.

Here is an example snippet based on the code you provided:

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>

I hope this information proves useful!

Edit:

I've included a more dynamic approach to styling each cell accordingly.

Answer 2

After not being able to find a CSS selector for targeting cells with numbers in them, I decided to create a JavaScript function that checks if the content of a cell can be converted into a number using !isNaN(col.innerText). Simply invoke the styleTable function whenever it is needed.

Here is an example snippet based on the code you provided:

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>

I hope this information proves useful!

Edit:

I've included a more dynamic approach to styling each cell accordingly.

A method for evaluating the condition of a <td> value in a table based on its corresponding table header

Answer №1

Edit:

Similar questions

Transferring input data between two HTML files in Electron with a secure login feature

Optimizing the particle rendering speed for HTML5 <canvas> elements

Showing a generated content before element on a progress bar using the ::before pseudo-class

Troublesome alignment with bootstrap grid system

How to remove checkbox border using HTML, JavaScript, and CSS

Change the way a button interacts with a different element

Is it possible for a DIV in one bootstrap column to appear on top of the content in another column?

Unusual sequence of JQuery Ajax calls

The functionality of the onclick and onserverclick attributes seem to be malfunctioning when

Automatically adjust the image size in CSS to fit the screen when the iPhone is rotated from portrait to landscape

The font implemented in Bootstrap does not appear to be adapting well to different

Is there a way for me to choose every element excluding those contained within a specific div?

Outline along a single edge

Engaging with JSON data inputs

Executing a Javascript function when a form is submitted

Unable to adjust font for headings using CSS and Bootstrap

Display advertisement in full screen on mobile devices with no need for scrolling bars

Using JavaScript, what is the method for inputting values into a window.prompt()?

The placeholder attribute for input types does not display consistently across all browsers

Display the widget beyond the boundaries of the sidebar