Html Question posted in
Some basic documentation can be found here.

Count unique values in the HTML TABLE

I have this HTML table

<table id="table">
  <thead>
    <tr>
      <td>Nº</td>
      <td>NOMBRE</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Andrea</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Gabriela</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Gabriela</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Alba</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Jose</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Luis</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Alba</td>
    </tr>
  </tbody>
</table>

And this script counts the table-rows with the ID "total__registros"

function totalregistros(){
  var TotalRegistros= document.getElementById("table").rows.length;
  
  document.getElementById("total__registros").value = "Registros: " + (TotalRegistros-1);
}
        
window.onload=totalregistros();

And the result is: "Registros: 7"

How to make the script count unique values only, based on the "NOMBRE" field, that should say, the result is: "Registros: 5"

I have this SQL statement that does not work in JS:

SELECT COUNT(DISTINCT NOMBRE) FROM usuarios
Tags:

4

Answers


  1. 0
    1. use querySelectorAll to select all second td‘s in a tr
      of the tbody.
    2. create an empty array
    3. check every Name of step 1 if it is already contained within the array. If not, push the name to the array.
    4. Use array.prototype.length to count the numbers of unique names:
    window.addEventListener('DOMContentLoaded', function() {
  const TABLE = document.querySelector('#table');
  const TD_NAMES = document.querySelectorAll('#table tbody tr td:nth-child(2)');
  
  let uniqueNames = [];
  
  TD_NAMES.forEach(NAME => {
    let name = NAME.textContent;
    if (!uniqueNames.includes(name)) {
      uniqueNames.push(name);
    }
  })
  
  console.log(uniqueNames);
  console.log(uniqueNames.length);
})
    <table id="table">
  <thead>
    <tr>
      <td>Nº</td>
      <td>NOMBRE</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Andrea</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Gabriela</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Gabriela</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Alba</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Jose</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Luis</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Alba</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    You can create a Set from all the names, then take its size.

    const uniqueNames = new Set(Array.from(
  document.querySelectorAll('#table > tbody > tr'), 
  tr => tr.cells[1].textContent
));
console.log(...uniqueNames);
console.log(uniqueNames.size);
    <table id="table"><thead><tr><td>Nº</td><td>NOMBRE</td></tr></thead><tbody><tr><td>1</td><td>Andrea</td></tr><tr><td>2</td><td>Gabriela</td></tr><tr><td>3</td><td>Gabriela</td></tr><tr><td>4</td><td>Alba</td></tr><tr><td>5</td><td>Jose</td></tr><tr><td>6</td><td>Luis</td></tr><tr><td>7</td><td>Alba</td></tr></tbody></table>
    Login or Signup to reply.
  3. 0

    Not going to get into formatting since you can probably figure that part out. You would use something like this and put it in a collection wherever you build billCollection you can add this to it, then you can reference that collection in your html

    ClearCollect(colbillCount,ShowColumns( AddColumns( GroupBy(billcollection, "NumeralDenomination", "ByDenomination"), "DenominationCount", CountRows(ByDenomination) ), "NumeralDenomination", "DenominationCount" ))

    Please use these one in tobody and tr tag

    ForAll(colBillCount,colBillCount.NumberalDenomination

    colBillCount.DenominationCount

    thanks

    Login or Signup to reply.
  4. 0

    To get values easily, you need to change from td tags inside thead tag to th tag.

    <table id="table">
  <thead>
    <tr>
      <th>Nº</td>
      <th>NOMBRE</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Andrea</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Gabriela</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Gabriela</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Alba</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Jose</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Luis</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Alba</td>
    </tr>
  </tbody>
</table>


    var length = [...new Set(Object.values(document.querySelectorAll("#table td:nth-child(2)")).map(td => td.innerHTML))].length;

console.log(length);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search